Question

让我们假设我有这个简化的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个子psuedoselector，以便只有我的新公式（3n）生效？

Answer 1

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

Answer 2

我想这就是你想要的。

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;
}

如何覆盖nth-child

2 个答案: