CSSセレクターで特定のクラスの最初の要素を選択する方法

今はこんな構造になっています

CSSを使って「選択中」を赤色にする方法

<div class="cont">
	<p>不选中</p>
	<p >不选中</p>
	<h1>不选中</h1>
	<p class="item">选中</p>
	<p class="item">不选中</p>
	<p>不选中</p>
	<p class="item">不选中</p>
	<p class="item">不选中</p>
	<p class="item">不选中</p>
</div>

最初に思い浮かぶのは疑似クラスセレクターです.item:first-child
が、上記の文は実際には両方の条件を満たす要素を選択します

• クラスを持つ.item要素
• 親要素の最初の要素です

つまり、div親要素の下にある最初の要素はclass='.item'要素ではないため、この文を追加しても要素は選択されません。

さらに、兄弟セレクターを使用すると~、A~B親要素を共有している限り、A の後のすべての B 要素を選択できます。

したがって、最初の解が得られます

最初にすべてを選択してください.item

 .cont> .item {
    
    
        color: red;
    }

未選択のチェックを外します

.cont> .item ~ .item {
    
    
        color: #000;
    }

これは、初期属性をリセットする必要があるため、あまり良くありません。各<p></p>色が異なる場所に設定された異なる色である場合、変更するのは簡単ではありません。

現時点では、:notセレクターを使用して 2 番目のソリューションを取得できます。

.cont>.item:not(.item ~ .item){
    
    
        color: red;
    }

提案

• まず、擬似クラス セレクターは使用しないでください。携帯電話では兄弟セレクターが使用できないようで、携帯電話に兄弟セレクターを配置しても機能しません。
• 2 つ目は、可読性が非常に悪いため、2 つ目を選択したい場合は、兄弟セレクターを再度使用する必要があり、3 つ目についても同様に、記述すると非常に長くなります。これを直接追加することをお勧めしますclass。item_1その中で、2を使用してください。class選択する方が.item,.item_1はるかに速くなります