Wie funktionieren CSS-Spezifitätsstufen zwischen Klassen/Pseudo-Klassen und Elementen/Pseudo-Elementen?

Question

I die folgenden Definitionen Im mit (von der CSS2 spec angepasst http://www.w3.org/TR/CSS21/cascade.html#specificity)

• a = auf einem Element, das die Art-Attribut
• b = Anzahl der ID-Attribute
• c = Anzahl von Attributen (Klassen) und pseudo-Klassen (: Link,: Hover)
• d = Anzahl von Elementen und Pseudo-Elementen (: first-line,: first-letter)

Mit den folgenden Arten (meine Berechnungen nach rechts):

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

und die folgenden HTML

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

Wenn ich es in einem Browser öffnen, ist die Textzeile rosa. Ich dachte, es wäre grün und beim Schweben wäre es gelb. Ich dachte, dass Elemente und Pseudoelemente (das d in der Berechnung) weniger Gewicht haben als Klassen und Pseudoklassen (das c in den Berechnungen).

Answer 1

Ich denke, dass :first-line spezifischer als nur .content ist. So ist die erste Zeile des Textes rosa, aber das Aufzählungszeichen der Liste ist grün (und gelb bei Hover). Alles ist gut, genau wie für mich. Stellen Sie sich vor

, dass die :first-line Wähler nur eine verschachtelte Text Knotenauswähler ist, wie:

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

Es arbeitet auf dem verschachtelten Element, so ist es wichtiger als jeder andere Wähler.

Answer 2

Ihr Verständnis der Spezifität ist völlig richtig. Pseudo-Klassen und Klassen sind einander in der Spezifität gleich, und beide rangieren höher als Pseudo-Elemente und -Elemente (die auch einander gleich sind). Dies ist explained pretty clearly bei der Spezifikation, mit der Sie bereits verknüpft sind.

Warum haben die Regeln, die Sie in li:first-line festgelegt haben, Vorrang vor denen, die Sie in .content:hover festgelegt haben, wenn letzteres spezifischer ist?

Da aus Sicht von CSS, Pseudo-Elemente sind Elemente. Das bedeutet, dass Sie ein li:first-line Element haben, das - wenn Sie es nicht stylen würden - color: green oder color: yellow von den .content und .content:hover Regeln erben würde. Aber Regeln, die ein Element direkt ansteuern, haben immer Vorrang vor geerbten Regeln und Ihr :first-line Selektor zielt auf ein Pseudo-Element innerhalb Ihr li. Die :first-line Regeln gewinnen einfach, weil sie nicht vererbt werden und die Regeln .content und .content:hover Selektoren sind geerbt (durch das Pseudo-Element enthalten in der li). Spezifitätsregeln sind ein Ablenkungsmanöver; Sie kommen nicht einmal ins Spiel.