CSSの子孫

Question

Stackで正しく答えられているこの質問を見ました。

問題は、各.class1要素の後に最初の2つのliを選択する方法でした。

<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> 

これは（素晴らしい）正しいと受け入れ答えた：あなたはまた、使用することができ、低特異性を維持するために

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

：

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

は今、私はこれで遊んでましたなぜこれがうまくいかないのか不思議に思っていた：

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

しかし、この方法で動作します：あなたは

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

を使用するときは、そのli要素をキャッチしていて、彼の子を探しているが、ここでのli要素は、それので、任意の子を持っていないので

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

Answer 1

を動作しません。もしulが 'class1'クラスを持っていれば、あなたが望むように動作するかもしれません。

Answer 2

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

HTMLは符号が働くだろうプラスとスペースを置き換える

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