7

次のような構造を持つが与えられulます：

<ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

CSS3を使用しliて、クラス製品で発生する他のすべてのをターゲットにする方法はありますか？

さまざまな構成でnth-of-childとnth-of-typeの両方を使用してみましたが、どちらもクラスに関係なく、他のすべてのli要素をターゲットにしているようです。

4

3 に答える 3

8

基本的に、プレーンなCSS3ではできません。n番目の子セレクターは、クラスではなく要素セレクターで機能します。したがって、li:nth-child(even)機能しますが、.product:nth-child(even)機能しません。

これを実現するにはjQueryが必要です。

于 2012-04-18T15:23:49.070 に答える
4

スポットをオーバーライドし、他のすべてのliを選択することで問題を解決できますか（他の人が言及しているように）？また、クラス名でulを選択することもできます。

これはどのように：

.ul_class li:nth-child(even) {
    background: #CCC;
}

.spot {
    background: green;
}

奇妙に見える可能性がある唯一のグリッチは、2つのスポットliが隣り合っている場合です。他のすべての場合、スポットはきれいに見えるはずだと思います。

私はまた、これがクロムでうまく機能することを発見しました：

li.product:nth-child(even) {
    background: #ccc;
}
于 2012-10-31T01:25:52.547 に答える
2

これはプレーンCSSでは（私がまだ知っている方法では）実行できませんが、プレーンJavaScriptソリューションは非常に単純です。

var​ lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}​

JSフィドルデモ。

代わりにjQueryを使用することもできますが（おそらく他のJavaScriptライブラリと同様）、必須ではありません。

于 2012-04-18T15:09:04.020 に答える