css - CSS：クラスではなく、表示される順序に基づいてリストアイテムをスタイル設定しますか？

Question

スタイリングオプションがほとんどないサイトマップを生成するCMSを使用しています。基本的に、リストアイテムにクラスを追加することはできず、異なる背景色を付ける必要があります。

これで、リストの最初と最後のアイテムのスタイルを設定できる最初の子と最後の子の疑似クラスがあることがわかりましたが、クラスで可能であれば、リスト内の他のアイテムを呼び出すことができるCSSはありますか？それらに割り当てられていませんか？

score 3 · Accepted Answer

:nth-child()CSS3 から使用:

/* select the third element if it's an li */
li:nth-child(3) {
    background-color: yellow;
}

score 1 · Accepted Answer

例:

リストの 2 番目の項目を選択します

li:nth-child(2) {/*styles*/}

奇数のリスト項目を選択します

li:nth-child(odd) {/*styles*/}

3番目、6番目、9番目、...のリスト項目を選択します

li:nth-child(3n) {/*styles*/}

1番目、5番目、9番目、...のリスト項目を選択します

li:nth-child(4n+1) {/*styles*/}

score 1 · Accepted Answer

CSS2 は :nth-child(n) をサポートしていません。色が正しい位置にある < ul > の背景画像を作成できます。しかし、私は古いブラウザで人々を台無しにすると言います;）

score 0 · Accepted Answer

CSS2 では、そうではないかもしれません。CSS3 では、nth-child()セレクターがあります。

element:nth-child(2) { ... }

上記は2番目の子を取得します。

それ以外の場合は、JavaScript/jQuery を使用して目的の結果を得ることができます。jQuery の例を次に示します。

$(function () {
    $('selector').eq(1).css('background', 'blue');
});

4 に答える 4