使用第n个孩子制作国际象棋图案

Question

我正在绞尽脑汁去实现一些相对简单的事情。

我需要选择页面上的每个第三个和第四个元素，我如何使用 css :nth-child() 来做到这一点？

也欢迎JS解答。

非常感谢。

***编辑

抱歉，我的问题写得不好。 我在下面附上了我需要的示例。

这就是我需要的结果， http://jsfiddle.net/8FXL6/

        <li></li>
        <li class="highlight"></li>
        <li class="highlight"></li>
        <li></li>
        <li></li>
        etc

无需对类名进行硬编码。

Answer 1

*:nth-child(3),*:nth-child(4){
}

从技术上讲，这会选择容器中第三个或第四个子元素的每个元素。如果您想选择 every 第 3 个或第 4 个元素（3、4、6、8 等），请使用：

*:nth-child(3n),*:nth-child(4n){
}

演示

根据您的编辑，您需要：

li:nth-child(4n-2),li:nth-child(4n-1){
}

演示

Answer 2

您可以使用逗号来组合选择器，使用 nth-child 来获取元素，

现场演示

elements = $('div .className :nth-child(3), div .className :nth-child(4)');

Answer 3

只使用CSS怎么样？

每第三个元素：

*:nth-child(3n+3) {color: red}

每第四个元素：

*:nth-child(4n+4) {color: blue}

这是 jsfiddle 的演示：http://jsfiddle.net/dufsx/

Answer 4

这可以仅使用 CSS 来解决

 *:nth-child(4n+2){background:blue;color: white;}
 *:nth-child(4n+3){background:blue;color: white;}

现场演示

Answer 5

您可以使用以下解决方案，

ul:nth-of-type(2n) li:nth-of-type(2n+1) {
background-color: black;
}
ul:nth-of-type(2n+1) li:nth-of-type(2n) {
background-color: black;
}