0

次のコード スニペットがあります。

<div class="data">
    <h2>Some Title</h2>
    <div id="aPanel75" class="aPanel">
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 1</span>
                <span class="value"><span>Value 1</span></span>
                <span class="help">...</span>
            </div>
        </span>
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 2</span>
                <span class="value"><span>Value 2</span></span>
                <span class="help">...</span>
            </div>
        </span>
        <span>
            <div class="nameValueHelp field">
                <span class="name">Field Label 3</span>
                <span class="value"><span>Value 3</span></span>
                <span class="help">...</span>
            </div>
        </span>
    </div>
</div>

少しの jQuery と CSS でゼブラ ストライプを取得します。

$('.data .field').filter(':even').addClass('odd');

と

.data .odd {
    background-color: #EDF0F5;
}

「奇妙な」クラスを追加するjQueryを取り除き、CSSだけを使用したいと思います。CSS nth-child セレクター (nth-of-type) のさまざまな組み合わせを試しました。しかし、何も機能していないようです。すべてグレーで白ではありません。

div.field の周りの余分な span タグが問題だと思いますが、残念ながら、基になる HTML 構造を簡単に変更したり、タグ クラスを変更したりすることはできません。

何か提案はありますか？

4

1 に答える 1

3

.field:nth-child(odd)or.field:nth-of-type(odd)は、その親.fieldの最初で唯一の子であるため、使用できません。それはあなたが行き詰まっていた場所だったかもしれません。divspan

それぞれ.fieldが独自の parentspanに埋め込まれており、それぞれspanが panel の子であるdivため、これを使用できます。

.data > .aPanel > span:nth-child(odd) > .field

マークアップを変更することはできませんが、divs が s 内に埋め込まれていることはまだかなり珍しいことspanです...たとえブラウザがそれに応じて DOM を喜んで構築したとしても、依存するのは賢明ではないことを覚えておいてください。ずっとそんな行動。

于 2012-05-17T09:19:46.963 に答える