如何覆盖第n个孩子

Question

Lets assume I have this simplified HTML tree:

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

And this CSS style:

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

I have no access to this selector, and so I want to override it to be

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

However, this affects both every 2nd, as well as every 3rd element . Here's a js-fiddle example.

How can I override an nth-child psuedoselector with a new formula, so that only my new formula (3n) takes effect?

Answer 1

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

Answer 2

I guess this is what you want.

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