在 css 中，我们经常需要针对列表或其他容器中的特定子元素应用不同的样式。如果需要修改的子元素数量较多，或者它们的位置比较特殊，手动为每个元素编写 css 规则会变得非常繁琐且容易出错。这时，我们可以利用 css 提供的 :nth-child() 选择器，实现批量修改子元素样式的目的。
:nth-child() 是一个伪类选择器，它允许我们根据元素在其父元素中的位置来选择元素。其基本语法如下：
selector:nth-child(n) {
/* 样式规则 */
}其中，selector 是要选择的元素，n 可以是：
- 一个数字：选择特定位置的元素，例如 ul li:nth-child(3) 会选择 ul 元素中第三个 li 元素。
- odd：选择所有奇数位置的元素。
- even：选择所有偶数位置的元素。
- 一个表达式：使用 an + b 的形式，其中 a 和 b 都是整数。例如，ul li:nth-child(2n+1) 会选择 ul 元素中第 1、3、5... 个 li 元素。
示例
假设我们有以下 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
- Item 1
- Item 2
- Item 3
- List A
- List B
- List C
- List D
我们希望将第三个 li 元素下的第一个和第三个 ol 元素的背景颜色设置为水绿色。可以使用以下 CSS 代码：
ul li ol:nth-child(1),
ul li ol:nth-child(3) {
background-color: aquamarine;
}
ul li{
background-color: violet;
}这段代码使用了逗号分隔的选择器列表，将 :nth-child(1) 和 :nth-child(3) 应用于相同的样式规则。
更灵活的选择方式
除了使用数字直接指定位置外，我们还可以使用 odd 和 even 来选择奇数或偶数位置的元素。例如，要将所有奇数位置的 ol 元素的背景颜色设置为水绿色，可以使用以下代码：
ul li ol:nth-child(odd) {
background-color: aquamarine;
}此外，我们还可以使用 an + b 表达式来实现更复杂的选择逻辑。例如，要选择第 2、5、8... 个 ol 元素，可以使用以下代码：
ul li ol:nth-child(3n-1) {
background-color: aquamarine;
}注意事项
- :nth-child() 选择器是基于元素在父元素中的位置进行选择的，而不是基于元素的类型。这意味着，如果父元素中包含其他类型的子元素，:nth-child() 选择器仍然会按照位置进行选择。
- :nth-child() 选择器从 1 开始计数，而不是从 0 开始。
- 在复杂的 HTML 结构中，使用 :nth-child() 选择器时需要仔细考虑元素之间的层级关系，以确保选择到正确的元素。
总结
:nth-child() 选择器是 CSS 中一个非常强大的工具，它可以帮助我们高效地针对特定位置的子元素应用样式。通过灵活运用 :nth-child() 选择器，我们可以避免重复编写 CSS 规则，提升代码的可维护性。在实际开发中，根据具体需求选择合适的 :nth-child() 表达式，可以实现各种各样的样式效果。
