अधिक विशिष्ट सीएसएस नियम काम नहीं कर रहा है

Question

मेरे निम्नलिखित कोड में, मैंने एच 1 के लिए #in h1 के रूप में अधिक विशिष्ट नियम परिभाषित किया है और कम विशिष्ट नियम # कंटेनर एच 1 भी परिभाषित किया गया है। लेकिन अगर # कंटेनर एच 1 #inner एच 1 के बाद रखा जाता है तो यह प्रभावी होता है और #inner एच 1 को अनदेखा किया जाता है, जबकि यह नहीं होना चाहिए क्योंकि यह अधिक विशिष्ट है।

कृपया इस मुद्दे को समझने में मेरी सहायता करें।

सीएसएस:

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; } 

HTML:

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

Answer 1

यह हो सकता है कि विशिष्टता का आपका विचार थोड़ा दूर है। विशिष्टता को संदर्भ-मुक्त विचार होना चाहिए: चूंकि सीएसएस को HTML से स्वतंत्र रूप से लोड किया जा सकता है, इसलिए आपको यह निर्धारित करने के लिए एक HTML दस्तावेज़ की आवश्यकता नहीं है कि कौन सा नियम अधिक "विशिष्ट" है। इस अन्य वैध उदाहरण पर विचार करें:

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

इस स्निपेट के साथ, आप अपने प्रारंभिक अनुमान के खिलाफ जाने के लिए है कि inner अधिक विशिष्ट होना चाहिए होगा। इसका मतलब है कि आपकी व्याख्या के संदर्भ में संदर्भ (जो सीएसएस नहीं है)।

बिंदु यह है कि दोनों नियमों को समान विशिष्टता (h1id द्वारा पहचाने गए तत्व के वंशज) के साथ देखा जाता है, और चयनकर्ता निकट वंश को उच्च प्राथमिकता नहीं देता है।

यदि समान विशिष्टता के दो नियम लागू होते हैं, तो विजेता सीएसएस में घोषित अंतिम है।

Answer 2

यह सब :) सीएसएस में कोई मुद्दा नहीं है कक्षाएं एक के बाद एक को पार्स करता है और पिछले शासन पिछले ओवरराइड करता है, निश्चित रूप से पिछले है अगर अधिक विशिष्ट नहीं है या इसमें शामिल नहीं है! इसमें महत्वपूर्ण बयान, आप फ़ॉन्ट आकार डाल सकते हैं: 25px! महत्वपूर्ण; पहले में यह अंतिम नियम को ओवरराइड करता है, अन्यथा कक्षाओं के स्थान को बदलें

Answer 3

दोनों के पास समान विशिष्टता है और जैसा कि आप नोट करते हैं, स्टाइल शीट में दिखाई देने वाला क्रम निर्धारण शैली है जिसके लिए शैली नियम लागू होते हैं ।

अधिक विशिष्टता प्राप्त करने के लिए नियमों को बनाने के कई तरीके हैं लेकिन आम तौर पर मैं !important संशोधक से दूर रहूंगा।

अधिक जानकारी के लिए W3 के सीएसएस स्पेक में 6.4.3 Calculating a selector's specificity देखें।