CSS中的nth-child

CSS的nth-child（）伪类选择器能够选择一个元素作为其父元素中指定类型的第n个子元素。

基础语法

selector:nth-child(n) { 
    //样式 
}

其中，selector是你想要选取的元素，n是你想要选择的元素在其父元素中的位置，注意：计数从1开始。

示例

1. 选择父元素的第二个子元素并将其背景颜色设置为红色

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

2. 选择父元素的奇数个子元素并将其文字颜色设置为蓝色

ul li:nth-child(odd) {
    color: blue;
}

3. 选择父元素的偶数个子元素并将其文字颜色设置为红色

ul li:nth-child(even) {
    color: red;
}

重点需要注意的事项

1. nth-child（）选择器规定的是选择父元素下的第n个指定子元素，而不一定是你在代码中写的第n个子元素。
2. 选择器中的数字n可以使用表达式，如n + 1，2n等。
3. nth-child（）选择器适用于所有元素，包括文本和注释。
4. nth-child（）选择器通过选择其父元素中的特定类型的元素来选择子元素，因此如果父元素中不存在指定类型的子元素，则该选择器不会选择任何元素。

总结

• nth-child是一种非常有用的选择器，可以轻松选择需要样式化的元素。
• 通过规定不同的n值，可以快速选择不同的子元素。
• 注意要点1所提到的问题，确保自己选择了自己需要的元素。