3

私はこれを持っています：

<ol>
<li class="letter">
<li class="letter">
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ol>

クラス「文字」ではない最初の9つのli要素を特定の方法でスタイル設定したい。したがって、私の考えでは、クラス「文字」ではないものを選択し、次を使用して選択しますnth-of-type。 

li:not(.letter):nth-of-type(-n+9):before { ... }

ただし、これはクラスに関係なく最初の 9 を選択します。同じ結果が得られます。

li:nth-child(-n+9):before { ... }

と に基づいて選択する例がいくつかありE:nth-of-typeます.c:nth-of-type。どうしてそこで止まるの？nth-of-type要素やクラスをオフにできるように、疑似クラスをオフにして選択を作成できないのはなぜですか? (それとも、どうにかできますか?)

4

1 に答える 1

4

の「タイプ」という言葉は、:nth-of-type()具体的には「要素タイプ」を指しているだけなので、他には何もありません。

クラスセレクターで適格であることがわかる例でさえ、:nth-of-type()それを間違っています。それらは、クラスではなく、要素タイプのn番目の兄弟によって実際に一致しています。クラスセレクターは、「このクラスがある場合にのみこの要素に一致する」と言うためにあり、兄弟を数えるときに実際には考慮されません。これが、例の両方のセレクターで同じ結果が得られる理由です。

現在のセレクター仕様では、セレクターの複雑な組み合わせに一致するn番目の兄弟を選択することはできません。そのため、現在、CSSでは、HTML構造を認識していないか、制御できない限り、達成したいことはできません。もちろん、最初の2つのli要素だけがクラスを持つことがわかっている場合は、次のようにすることができます。

li:nth-child(n+2):nth-child(-n+9)::before { ... }

ただし、HTML構造が異なる場合、これはあまり役に立ちません。

この特定の目的のため:nth-match()にセレクター4で提案されていますが、実装についてはまだ何も言われていません。したがって、今のところ、純粋なCSSに関しては運が悪いです。

于 2013-01-08T15:25:32.480 に答える