2

私がこの単純化されたHTMLツリーを持っていると仮定しましょう:

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>         
   <li>Item 3</li>
    .
    .
    .
   <li>Item n</li>
 </ul>

そしてこのCSSスタイル:

ul li:nth-child(2n){ background-color: blue; }

このセレクターにアクセスできないので、オーバーライドして

ul li:nth-child(3n){ background-color: red; }

ただし、これは2番目ごとと3番目ごとの要素の両方に影響します。これがjs-fiddleの例です。

n番目の子の疑似セレクターを新しい式でオーバーライドして、新しい式(3n)のみが有効になるようにするにはどうすればよいですか?

4

2 に答える 2

5
ul li:nth-child(3n){ background-color: transparent; }
ul li:nth-child(2n){ background-color: red; }
于 2013-02-06T14:54:51.087 に答える
0

私はこれがあなたが望むものだと思います。

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

ul li:nth-child(3n+2){
    background-color: blue;
}

ul li:nth-child(3n){
    background-color: red;
}
于 2018-02-20T04:50:50.830 に答える