CSS Child Descendants

Question

Ich habe gerade diese Frage hier auf Stack richtig beantwortet.

Die Frage war, wie die ersten zwei li nach jedem .class1 Element ausgewählt werden.

<ul> 
    <li>Something</li> 
    <li class="class1">Important</li> 
    <li>I want this</li> 
    <li>I want this</li> 
    <li class="class1">Important</li> 
    <li>I want this</li> 
    <li>I want this</li> 
    <li>Something</li> 
    <li>Something</li> 
</ul> 

Dies war die (gut) korrekt und akzeptierte Antwort:

.class1 + li will select the first subsequent sibling. 
.class1 + * + li will select the second. 

zu halten Spezifität niedrig, könnte man auch verwenden:

.class1 + *, 
.class1 + * + * {...} 

Nun, ich spiele herum mit diesem und fragte mich, warum das nicht funktioniert:

li.class1 li:nth-child(-n+2) {color:red;} 

Aber funktioniert so:

li:nth-child(-n+2) {color:red;} 

Answer 1

Denn wenn Sie

li.class1 li:nth-child(-n+2) {color:red;} 

Sie, dass Li Element fangen und Sie suchen sein Kind aber li Elemente hier kein Kind hat, so dass es wird nicht funktionieren. Wenn ul Klasse 'Klasse1' hätte, würde es vielleicht funktionieren wie du willst.

Answer 2

li.class1 li:nth-child(-n+2) {color:red;}

dieses Geben Stile einer li innerhalb einer li Klasse mit class1

Das funktioniert, wenn die HTML wie

ist

<li class="class1"> 
    ...... 
    <li></li> 
    ...... 
</li>