Jak działają poziomy specyficzności CSS między klasami/pseudo-klasami a elementami/pseudo-elementami?

Question

mi stosując następujące znaczenia (na podstawie specyfikacji CSS2 http://www.w3.org/TR/CSS21/cascade.html#specificity)

• a = pomocą atrybutu stylu na elemencie
• b = liczba atrybutów ID
• c = liczba atrybutów (klasy) i klas (pseudo: Link,: aktywowanie)
• d = liczba elementów i pseudo-elementów (first-line: najpierw jednoliterowych)

Z następujących stylach (moich obliczeń w prawo):

.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 */ 

i dodaje html

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

Kiedy go otworzyć w przeglądarce, linia tekstu jest różowy. Myślałem, że będzie zielony i na zawisie, będzie żółty. Myślałem, że elementy i pseudoelementy (d w obliczeniach) mają mniejszą wagę niż klasy i pseudo klasy (c w obliczeniach).

Answer 1

Domyślam się, że :first-line jest bardziej szczegółowy niż tylko .content. Pierwsza linia tekstu jest różowa, ale punkt na liście jest zielony (i żółty po najechaniu kursorem). Wszystko jest dobrze, jak dla mnie.

Wyobraźmy sobie, że wybierak :first-line tylko zagnieżdżony selektor węzeł tekstowy, jak:

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

Działa na zagnieżdżonego elementu, więc to jest ważniejsze niż jakikolwiek inny selektora.

Answer 2

Twoje zrozumienie specyfiki jest całkowicie poprawne. Pseudoklasy i klasy są sobie równe pod względem swoistości, a oba z nich mają wyższą pozycję niż pseudoelementy i elementy (które również są sobie równe). To jest explained pretty clearly w specyfikacji, do której już masz link.

Dlaczego zatem reguły ustawione w li:first-line mają pierwszeństwo przed ustawieniami podanymi w .content:hover, jeśli te ostatnie są bardziej szczegółowe?

Ponieważ, z perspektywy CSS, pseudoelementy są elementami. Oznacza to, że masz element li:first-line, który - gdybyś go nie stylizował - odziedziczyłby color: green lub color: yellow z reguł .content i .content:hover. Jednak reguły, które są skierowane bezpośrednio na element, zawsze mają pierwszeństwo przed regułami odziedziczonymi, a selektor :first-line jest kierowany na pseudoelement w obrębie swojego li. Reguły :first-line wygrywają po prostu dlatego, że nie są dziedziczone, a reguły od .content i .content:hover są dziedziczone (przez pseudoelement zawarty w li). Zasady szczegółowe to czerwony śledzia; nawet nie wchodzą w grę.