Jak selektor elementów jest bardziej szczegółowy niż selektor id?

Question

Jak rozumiem, elementy są najmniej szczegółowe. (element vs id). Proszę mi pomóc w zrozumieniu specyfiki selektorów ogólnie.

<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

Aby zrozumieć specyfikę CSS, przeczytaj The Specificity Wars. Jest przydatny arkusz odniesienia, za:

Więc selektor jak #foo musiałby 1,0,0 specyfikę, podczas gdy selektor elementu jak p musiałby 0,0,1 specyfikę. Spośród tych dwóch, selektor ID "wygrał", ponieważ 100 jest większy niż 1.

Bardziej szczegółowe (heh) wersja, która zawiera również pseudo-elementy i pseudoklas można znaleźć tutaj: http://www.standardista.com/css3/css-specificity/

Answer 2

Przy stosowaniu zasady, swoistość selektor jest obliczana przez zliczanie wszystkie selektorów prostych (związany żadnymi kombinatorów), a nie tylko przycisk wyboru. Oznacza to, że nie jesteś tylko porównanie tych dwóch selektorów:

div 
#firstDiv 

Ale masz porównanie tych dwóch selektorów:

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

Tu, pierwszy selektor jest bardziej szczegółowy, ponieważ ma:

• Przełącznik wyboru ID, #container

• Selektor rodzaju (elementu), div; i

• Pseudoklasą, która w tym przypadku jest :last-of-type; :not() sobie pseudo-klasa nie liczą selektora specyfiki

Podczas gdy drugi selektor składa się tylko z identyfikatorem. Zauważ, że kombinatory takie jak > w twoim pierwszym przykładzie nie liczą się do specyficzności selektora.

W sekcji Selectors spec znajduje się cała sekcja opisująca sposób obliczania specyficzności selektora.