作者:谁会心如刀割_590 | 来源:互联网 | 2020-08-26 06:49
CSS中有一个伪类nth-child,这个伪类该怎么使用呢?接下来的这篇文章就来给大家介绍一下CSS中的伪类nth-child的使用方法,我们来看具体的内容。
CSS中有一个伪类nth-child,这个伪类该怎么使用呢?接下来的这篇文章就来给大家介绍一下CSS中的伪类nth-child的使用方法,我们来看具体的内容。
还有其他情况,下面我们来看具体的应用实例
首先HTML代码如下
- 列表项目1
- 列表项目2
- 列表项目3
- 列表项目4
- 列表项目5
- 列表项目6
运行效果如下图所示
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;
}
在浏览器上显示如下效果
ul li:nth-child(3){
background-color: skyblue;
}
在浏览器上显示效果如下
ul li:nth-child(n+4){
background-color: skyblue;
}
在浏览器上运行效果如下
以上就是CSS伪类nth-child怎么使用的详细内容,更多请关注 第一PHP社区 其它相关文章!