स्पेसिफ़िसिटी का उपयोग करके यह भविष्यवाणी करना सीखें कि कौन सा CSS नियम जीतता है, और कम कोड लिखने के लिए इनहेरिटेंस का लाभ उठाएँ।
इस पाठ को Kodokon में खोलेंआप एक नियम लिखते हैं, पेज रीलोड करते हैं… और कुछ नहीं बदलता। ज़्यादातर मामलों में, दोषी कोई बग नहीं होता: यह कैस्केड होता है। जब कई नियम एक ही एलिमेंट को टारगेट करते हैं, तो ब्राउज़र इस क्रम में निर्णय करता है: नियम का मूल (पहले ब्राउज़र स्टाइल, फिर आपके), सेलेक्टर की स्पेसिफ़िसिटी, और अंत में कोड में दिखने का क्रम। इस तंत्र में महारत हासिल करने से आपके डीबगिंग के घंटे बचेंगे।
p {
color: gray;
}
.article p {
color: navy;
}स्पेसिफ़िसिटी की गणना तीन हिस्सों वाले स्कोर के रूप में होती है: (ids, classes, elements)। #menu का स्कोर 1-0-0 है, .nav-link का स्कोर 0-1-0 है, a का स्कोर 0-0-1 है। आप बाएँ से दाएँ तुलना करते हैं: #menu (1-0-0), .nav .link .active (0-3-0) को हरा देता है, भले ही उसमें तीन क्लास हों। मानसिक अभ्यास: header nav a (0-0-3) और .main-link (0-1-0) में से कौन जीतता है? क्लास, क्योंकि एक क्लास किसी भी संख्या के एलिमेंट्स से भारी होती है।
header nav a {
color: steelblue;
}
.main-link {
color: crimson;
}इनहेरिटेंस कम कोड लिखने में आपका सहयोगी है: टेक्स्ट से संबंधित प्रॉपर्टीज़ (color, font-family, font-size, line-height) अपने आप डिसेंडेंट्स तक पहुँच जाती हैं। बॉक्स प्रॉपर्टीज़ (margin, padding, border, width) इनहेरिट नहीं होतीं - सौभाग्य से, वरना हर चाइल्ड को अपने पैरेंट का बॉर्डर मिल जाता। इसलिए अपनी टाइपोग्राफी एक बार, सबसे ऊपरी स्तर पर परिभाषित करें।
body {
font-family: "Inter", sans-serif;
color: #1f2937;
line-height: 1.6;
}#intro { color: red; } फिर .text { color: blue; }। कौन सा रंग लागू होता है?