html - 如何覆盖第 n 个孩子

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 个子伪选择器，以便只有我的新公式 (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;
}