वर्ग/छद्म-वर्गों और तत्वों/छद्म तत्वों के बीच सीएसएस विशिष्टता स्तर कैसे काम करते हैं?

Question

मैं निम्नलिखित परिभाषा का उपयोग कर रहा

• एक (सीएसएस 2 कल्पना http://www.w3.org/TR/CSS21/cascade.html#specificity से रूपांतरित) = एक तत्व की शैली विशेषता का उपयोग
• ख = आईडी की संख्या का श्रेय
• c = विशेषताओं की संख्या (वर्ग) और छद्म वर्गों (: लिंक,: मंडराना)
• d = तत्वों और छद्म तत्वों की संख्या (: पहली पंक्ति,: पहला अक्षर)

निम्नलिखित शैलियों (सही करने के लिए मेरी गणना) के साथ:

.content   {color: green;} /* a=0 b=0 c=1 d=0 -> 0,0,1,0 */ 
.content:hover {color: yellow;} /* a=0 b=0 c=2 d=0 -> 0,0,2,0 */ 
li    {color: orange;} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */ 
li:first-line  {color: pink;} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */ 

और निम्नलिखित एचटीएमएल

<li class="content">The first line</li> 

जब मैंने इसे एक ब्राउज़र में खोलने के लिए, पाठ की पंक्ति गुलाबी होता है। मैंने सोचा कि यह हरा होगा और होवर पर, यह पीला होगा। मैंने सोचा कि तत्वों और छद्म तत्व (गणना में डी) कक्षाओं और छद्म वर्गों (गणना में सी) से कम वजन है।

Answer 1

मुझे लगता है कि :first-line सिर्फ .content से अधिक विशिष्ट है। तो टेक्स्ट की पहली पंक्ति गुलाबी है, लेकिन सूची की बुलेट हरा (और होवर पर पीला) है। मेरे लिए सबकुछ अच्छा है।

कल्पना कीजिए कि :first-line चयनकर्ता सिर्फ एक नेस्टेड पाठ नोड चयनकर्ता है, जैसे:

<li class="content"> 
    <text:text>The first line</text:text><br /> 
    The second line 
</li> 

यह नेस्टेड तत्व पर चल रही है, तो यह किसी भी अन्य चयनकर्ता से ज्यादा महत्वपूर्ण है।

Answer 2

विशिष्टता की आपकी समझ पूरी तरह से सही है। छद्म-वर्ग और कक्षाएं विशिष्टता में एक-दूसरे के बराबर होती हैं, और उनमें से दोनों स्यूडो-तत्वों और तत्वों (जो एक-दूसरे के बराबर होती हैं) से अधिक रैंक होती हैं। यह उस स्पेस पर explained pretty clearly है जिसे आपने पहले ही लिंक किया है।

तो li:first-line में आपके द्वारा निर्धारित नियमों को .content:hover में सेट किए गए नियमों पर प्राथमिकता क्यों लें, यदि उत्तरार्द्ध अधिक विशिष्ट है?

क्योंकि, सीएसएस के नजरिए, छद्म तत्वों तत्वों हैं से। इसका मतलब है कि आपके पास li:first-line तत्व है - यदि आपने इसे स्टाइल नहीं किया है - color: green या color: yellow.content और .content:hover नियमों से प्राप्त होगा। लेकिन नियमों को लक्षित करने वाले नियम सीधे विरासत वाले नियमों पर प्राथमिकता लेते हैं, और आपके :first-line चयनकर्ताli के भीतर एक छद्म-तत्व को लक्षित कर रहा है। :first-line नियम केवल इसलिए जीतते हैं क्योंकि उन्हें विरासत में नहीं मिला है और .content और .content:hover के नियम चयनकर्ता विरासत में हैं (li के भीतर निहित छद्म तत्व द्वारा)। विशिष्टता नियम एक लाल हेरिंग हैं; वे भी खेल में नहीं आते हैं।