21

クラスの親を持つリスト内のすべての要素に奇数/偶数セレクターを適用しようとしています。

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

ここに画像の説明を入力

jsFiddle へのリンク

しかし、色はリセットされています。リスト項目をテキストの色にしたい。

これを行う方法はありますか？

4

4 に答える 4

4

CSS

現在、これを複製するもう 1 つの信頼できる方法は、隣接する兄弟セレクターを使用することです。

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }

次の 3 つのオプションがあります。

  • not()セレクターを使用します。これにより、ハイライト表示が無期限に維持されますが、ハイライト表示の順序が反転することがあります。強調表示したい要素が膨大な数にグループ化されたリストが含まれている可能性がある場合は、このオプションを使用します。
  • +(隣接する兄弟) セレクターを使用します。このオプションは無期限に強調表示し続けるわけではありませんが、順序が決して反転しないことを保証します。強調表示された要素をまとめてグループ化するリストが小さい場合は、このオプションを使用します。
  • ~(任意の兄弟) セレクターを使用します。一致する兄弟の合計ではなく、リストの合計の長さに基づいてリストが適切に強調表示されないため、これはお勧めしません。これは、他の 2 つのオプションよりも前に常に失敗し、より顕著になります。

ここでフィドル: http://jsfiddle.net/corymcd/kVcZJ/

ここから HTML を自由にコピーして、他の人がメソッドを示したものに貼り付けてください。

jQuery

前に述べたように、jQuery のようなものを使用すると、要素に偶数/奇数クラスを割り当てたり、インライン スタイルを変更したりすることが簡単にできます。

// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});

ここでフィドル: http://jsfiddle.net/corymcd/kAPvX

于 2013-07-04T00:45:26.597 に答える