扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章将为大家详细讲解有关CSS伪类nth-child如何使用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都做网站、成都网站建设的开发，更需要了解用户，从用户角度来建设网站，获得较好的用户体验。创新互联建站多年互联网经验，见的多，沟通容易、能帮助客户提出的运营建议。作为成都一家网络公司，打造的就是网站建设产品直销的概念。选择创新互联建站，不只是建站，我们把建站作为产品，不断的更新、完善，让每位来访用户感受到浩方产品的价值服务。
nth-child是一个伪类，它为选择器添加条件，并允许您将样式应用于子元素的第n个（nth）。
当你想要交替设置背景颜色以便在包含许多项目的表格中轻松查看时，nth-child就变得非常有用。
下面我们就来看nth-child的使用方法
nth-child的描述如下
元素:nth-child(值){样式的内容}除了数字，2n + 1和一些数学表达式之外，even（偶数）等可以被设置为值。
仅应用于偶数时： 2n或even
仅应用于奇数： 2n+1或odd
还有其他情况，下面我们来看具体的应用实例
首先HTML代码如下
运行效果如下图所示
接着使用nth - child，并进行设置，使背景颜色成为＃add8e6，仅应用于特定的列表项目。
选择偶数时的情况
nth-child的值设置为even或者2n
CSS代码
ul li:nth-child(even){
background-color: skyblue;
}在浏览器上显示如下效果
选择奇数时的情况
nth-child的值设置为odd或者2n+1
CSS代码
ul li:nth-child(odd){
background-color: skyblue;
}在浏览器上显示如下效果
仅选择第n个元素的情况
输入要应用于nth-child值的项目编号。我们在这里输入3。
CSS代码
ul li:nth-child(3){
background-color: skyblue;
}在浏览器上显示效果如下
选择第n个及以上的元素的情况
n+到nth - child输入要开始应用的项目的数值。这里是n+4。
CSS代码
ul li:nth-child(n+4){
background-color: skyblue;
}在浏览器上运行效果如下
关于CSS伪类nth-child如何使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网