阅读量:0
CSS3中的nth-child选择器用于选择父元素下的特定子元素，如第n个、奇数或偶数等。
CSS3伪类选择器：nth-child()
:nth-child()选择器是CSS3中提供的一种伪类选择器，用于选择某个元素的一个或多个特定的子元素，它从第一个子元素开始计数，可以结合公式、关键字等进行复杂的选择操作。
基本用法
1、简单数字序号写法：直接匹配第N个元素，参数N必须为大于0的整数。li:nth-child(3)会选择列表中的第三个元素。
2、倍数写法：匹配所有倍数为a的元素。li:nth-child(3n)会选择列表中第3、6、9...个元素。
3、倍数分组匹配：先对元素进行分组，每组有a个，b为组内成员的序号。li:nth-child(3n+1)会选择列表中每3个一组的第1个元素。
4、反向倍数分组匹配：与倍数分组匹配类似，但匹配方向相反。li:nth-child(-3n+8)会从列表的最后向前数，选择前8个（包括第8个）元素中的第2、5和8个元素。
5、奇偶匹配：分别匹配序号为奇数与偶数的元素。li:nth-child(odd)会选择列表中的奇数位置元素，li:nth-child(even)会选择偶数位置元素。
浏览器支持
:nth-child()选择器得到了广泛的浏览器支持，包括IE9及以上版本，火狐，谷歌，Safari，Opera等。
相关问题与解答
1、问题一：:nth-child()和:nth-of-type()有什么区别？
回答：:nth-child()选择的是父元素的特定子元素，而不考虑子元素的类型。p:nth-child(2)会选择属于其父元素的第二个子元素，不论这个子元素的标签是什么，而:nth-of-type()则选择特定类型的子元素。p:nth-of-type(2)会选择属于其父元素的第二个<p>元素。
2、问题二：如何使用:nth-child()实现表格的隔行变色？
回答：可以使用tr:nth-child(even)和tr:nth-child(odd)来分别选择表格的偶数行和奇数行，然后应用不同的背景颜色。tr:nth-child(even){background-color: #ccc;}会使表格的偶数行背景色变为灰色。
各位小伙伴们，我刚刚为大家分享了有关“CSS3伪类选择器：nth-child()”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
