2015-12-28 8 views
5

एक सीएसएस फ़ाइल में, अंतिम परिभाषित शैली को पिछले परिभाषित लोगों पर प्राथमिकता दी जाती है।सीएसएस- चयनकर्ता नहीं - प्राथमिकता तोड़ता है?

लेकिन not selector का उपयोग करते समय, प्राथमिकता टूट जाती है और not selector के साथ कक्षा को प्राथमिकता मिलती है, भले ही यह फ़ाइल के शीर्ष पर स्थित हो।

प्राथमिकता के ब्रेक के पीछे तर्क क्या है?

Example:

<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    <style> 
     .red-with-not:not(.something) { 
     background: red; 
     } 
     .red { 
     background: red; 
     } 
     .blue { 
     background: blue; 
     } 
    </style> 
    </head> 
    <body class="base"> 
    <h1 class="blue red-with-not">Expected Blue - PROBLEM</h1> 
    <h1 class="blue red">Expected Blue - Great!</h1> 
    </body> 
</html> 

परिणाम:

enter image description here

उत्तर

4

आप कहते हैं:

एक सीएसएस फ़ाइल में, पिछले परिभाषित शैली पिछले परिभाषित लोगों

नहीं इतनी जल्दी ... उच्च विशिष्टता के साथ एक वर्ग पूर्वता अधिक लेता है पर पूर्वता लेता है आदेश जिसमें कक्षाएं सीएसएस में दिखाई देती हैं! (spec - गौर करें कि 'विशिष्टता' सूची में 'प्रकटन का क्रम' से पहले दिखाई देता है)

तो आप ऊपर की कक्षाओं की विशिष्टता की गणना करेंगे?

w3c spec से: निषेध छद्म वर्ग के अंदर

चयनकर्ता किसी भी अन्य तरह गिने जाते हैं लेकिन निषेध अपने आप में एक छद्म वर्ग के रूप में नहीं गिना जाता।

तो चयनकर्ता .red-with-not:not(.something) की विशिष्टता =

/* a=0 b=2 c=0 -> specificity = 020 (two class selectors) */ 

कहाँ

a = चयनकर्ता में # आईडी चयनकर्ताओं,

b = # वर्ग चयनकर्ताओं, चयनकर्ताओं गुण, और छद्म चयनकर्ता में क्लास और

c = # प्रकार चयनकर्ताओं और चयनकर्ता

के रूप में अन्य चयनकर्ताओं .red और .blue के लिए apposed में छद्म तत्वों - जो केवल 010 (एक वर्ग चयनकर्ता) की एक विशिष्टता है।


यदि आप रुचि रखते हैं, तो specificity calculator विशिष्टता की गणना के लिए एक अच्छा संदर्भ है।

3

विशिष्टता .red-with-not:not(.something) के लिए बाहर आता है '0020' होने का है, जबकि .red के लिए या .blue बाहर आता है '0010'। इसलिए, .red-with-not:not(.something) को प्राथमिकता दी गई है।

enter image description here

enter image description here

अधिक समझने के लिए Specifics on CSS Specificity देखें।

संबंधित मुद्दे