CSS nth-of-type选择器问题：如何定位2/3、6/7、10等元素？

嘿，别着急，这个需求完全可以用CSS的nth-of-type选择器实现，根本不需要动用JavaScript！

先看你遇到的问题：你想选中第2/3、6/7、10/11……这些元素，但之前的代码没生效，问题出在nth-of-type的公式写错啦。你之前用的3n+1会选中第1、4、7、10……个元素，和你的需求刚好反过来了。

咱们来拆解一下目标元素的规律：第2、3个，然后是6、7（和前一组差4），再是10、11（又差4），也就是说每4个元素为一个周期，每个周期里的第2、3个元素就是你要的目标。

那对应的CSS公式就应该是4n+2和4n+3，n从0开始计算：

• 当n=0时，得到2、3
• 当n=1时，得到6、7
• 当n=2时，得到10、11
• 以此类推，完美匹配你的需求

调整后的代码如下：

ul {overflow:hidden; width:300px;}
ul li {width:150px; float:left; background:#ff0000;}
/* 选中第2/3、6/7、10/11...的元素 */
ul li:nth-of-type(4n+2),
ul li:nth-of-type(4n+3) {
  background: #fff;
}

这样修改后，就能精准定位到你想要的元素啦，纯CSS就能搞定，不用麻烦JS~

内容的提问来源于stack exchange，提问作者Liam