दो rules एक ही element को निशाना बनाते हैं और एक ही property सेट करते हैं। ब्राउज़र कैसे तय करता है कि कौन जीतेगा?

ब्राउज़र इसे क्रम से सुलझाता है: पहले origin और importance, फिर cascade layers, फिर specificity, फिर document का क्रम। inline styles सामान्य author rules से ऊपर होती हैं, और important declaration origin का क्रम पलट देती है, तो कोई important user या user agent rule किसी important author rule को हरा सकता है। एक layer के भीतर specificity में id, फिर class, attribute और pseudo class, फिर element selectors गिने जाते हैं। बराबरी पर जो rule बाद में आता है वही जीतता है।

मैं इसे बराबरी तोड़ने वालों की एक कतार की तरह देखता हूं। पहले ब्राउज़र origin और importance देखता है, तो inline style किसी stylesheet rule को हरा देती है और important declaration पूरा क्रम बदल देती है। फिर cascade layers, और यही वह हिस्सा है जो लोग छोड़ देते हैं: कोई भी बिना layer वाला rule किसी layer के rule को हरा देता है चाहे वह layered rule कितना ही specific हो, और बाद वाली layers पहले वाली को हराती हैं। इसके बाद ही specificity की तुलना होती है, और वह तीन खाने हैं, पहले ids, फिर classes तथा attributes तथा pseudo classes, फिर element selectors, बाएं से दाएं तुलना करते हुए, तो एक अकेली id कितनी भी classes को हरा देती है। सब बराबर हो तो document के क्रम में आखिरी वाला जीतता है। व्यवहार में मैं layers से इसे उबाऊ बना देता हूं। reset पहली layer में, फिर तीसरे पक्ष की, फिर components, और सबसे आखिर में utilities, ताकि कोई utility class बिना important के हमेशा जीते। important का इस्तेमाल मैं अब सिर्फ ऐसे rule के लिए करता हूं जिस पर सच में कोई मोलभाव नहीं, आमतौर पर print stylesheet के अंदर कुछ।