css - 1番目、4番目、7番目の要素などを選択する方法は?

Question

1番目、4番目、7番目の要素などを選択するにはどうすればよいですか?! また、3番目、6番目、9番目などを選択する方法は?

パターンは選択し、要素を選択してから、2 つを残して 3 つ目を選択します。を使用する必要:nth-childがあることはわかっていますが、正確な方法はわかりません。

Answer 1

1 番目、4 番目、7 番目 (など) の要素のスタイルを設定する最も簡単な方法は、CSS を使用して以下を使用することです (li要素を操作していると仮定していますが、明らかにユースケースに適応します)。

ul {
    counter-reset: lis;
}

li::after {
    counter-increment: lis;
    content: counter(lis, decimal);
}

li:nth-child(3n+1) {
    background-color: #f90;
}

JS フィドルのデモ。

参考文献:

• CSS セレクター。
• :nth-child().