आईडी चयनकर्ता से तत्व चयनकर्ता अधिक विशिष्ट कैसे है?

Question

जैसा कि मैं समझता हूं कि तत्व कम से कम विशिष्ट हैं। (तत्व बनाम आईडी)। आम तौर पर चयनकर्ताओं की विशिष्टता को समझने में मेरी मदद करें।

<div id="container"> 
    <div id="firstDiv">FIRST Div inside CONTAINER</div> 
    <div id="secondDiv">SECOND Div inside CONTAINER</div> 
</div> 

body{ 
    width: 780px; 
    margin: 20px auto; 
} 
#container > div:not(:last-of-type){ 
    margin-bottom: 0px; /*How its more specific than ID selector below? */ 
} 
#container { 
    border: 15px solid orange; 
    padding: 10px; 
} 
#firstDiv{ 
    margin: 50px; /*This is not taking effect*/ 
    border: 5px solid blueviolet; 
} 
#secondDiv{ 
    border: 5px solid brown;  
} 

http://jsfiddle.net/t2RRq/

Answer 1

सीएसएस विशिष्टता को समझने के लिए, The Specificity Wars पढ़ें। ,

तो, #foo की तरह एक चयनकर्ता 1,0,0 विशिष्टता के लिए होता है, जबकि p की तरह एक तत्व चयनकर्ता 0,0,1 विशिष्टता होगा: सरल संदर्भ चादर भी नहीं है। इन दोनों में से, आईडी चयनकर्ता 100 के रूप में "जीत" होगा 1 से अधिक है।

एक अधिक विशिष्ट (हे) संस्करण जो भी छद्म तत्वों और छद्म वर्ग शामिल है यहां पाया जा सकता: http://www.standardista.com/css3/css-specificity/

Answer 2

जब नियमों को लागू करने, चयनकर्ता विशिष्टता गिनती सभी सरल चयनकर्ताओं (किसी भी combinators से जुड़े हुए) द्वारा गणना, और न सिर्फ कुंजी चयनकर्ता है। इसका मतलब है कि तुम सिर्फ इन दो चयनकर्ताओं की तुलना नहीं कर रहे हैं:

div 
#firstDiv 

लेकिन आप इन दो चयनकर्ताओं तुलना कर रहे हैं:

#container > div:not(:last-of-type) 
#firstDiv 

यहाँ, पहले चयनकर्ता अधिक विशिष्ट है क्योंकि यह है:

• एक आईडी चयनकर्ता, #container

• एक प्रकार (तत्व) चयनकर्ता, div; और

• एक छद्म-वर्ग, जो इस मामले में :last-of-type है; :not() छद्म वर्ग ही चयनकर्ता विशिष्टता

में शामिल नहीं होता जबकि दूसरा चयनकर्ता केवल एक आईडी के होते हैं। ध्यान दें कि आपके पहले उदाहरण में संयोजक खुद को > पसंद करते हैं, चयनकर्ता विशिष्टता की ओर गिनती नहीं करते हैं।

Selectors spec में एक संपूर्ण अनुभाग है जिसमें चयनकर्ता विशिष्टता की गणना कैसे की जाती है।