如何使用:nth-child(n)选择指定子元素/排除特定子元素？

一、选中指定序号的子元素（如第2、3、5、7个） #

直接用逗号分隔多个:nth-child()选择器，每个选择器对应一个目标子元素的序号即可：

/* 选中第2、3、5、7个div子元素 */
div:nth-child(2),
div:nth-child(3),
div:nth-child(5),
div:nth-child(7) {
  color: red;
  font-weight: bold;
}

这种方式简单直接，适合选中零散、无规律序号子元素的场景。

二、排除指定序号的子元素（如排除第1和第6个） #

使用:not()伪类结合:nth-child()，把需要排除的序号放到:not()中，有两种写法：

写法1（兼容更多旧版浏览器） #

/* 排除第1和第6个div，选中其余所有 */
div:not(:nth-child(1)):not(:nth-child(6)) {
  background-color: lightblue;
}

写法2（现代浏览器支持） #

可以在单个:not()里放多个选择器，代码更简洁：

div:not(:nth-child(1), :nth-child(6)) {
  background-color: lightblue;
}

补充说明 #

如果目标子元素的序号有规律（比如选所有奇数、偶数，或从第3个开始每隔2个选一个），可以用:nth-child()的公式语法（如:nth-child(2n+1)选奇数），但针对无规律的特定序号，上面的方法是最直接有效的。

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