CSS伪类nth-child如何使用

　　介绍

这篇文章将为大家详细讲解有关CSS伪类nth-child如何使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

CSS伪类nth-child如何使用“> </p> <p> nth-child是一个伪类,它为选择器添加条件,并允许您将样式应用于子元素的第n个(n)。<br/> </p> <p>当你想要交替设置背景颜色以便在包含许多项目的表格中轻松查看时,nth-child就变得非常有用。</p> <p>下面我们就来看<强> nth-child的使用方法</强> </p> <p> nth-child的描述如下</p> <pre类=元素:nth-child(值){样式的内容}

除了数字,2 n + 1和一些数学表达式之外,甚至(偶数)等可以被设置为值。

仅应用于偶数时:2 n或甚至
仅应用于奇数:2 n + 1或奇怪的

还有其他情况,下面我们来看具体的应用实例

<强>首先HTML代码如下

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=皍tf-8"祝辞 　　& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/sample.css " type=" text/css "> 　　头 　　<身体> 　　列表项目1 　　<李>列表项目2 　　<李>列表项目3 　　<李>列表项目4李 　　<李>列表项目5 　　<李>列表项目6 　　 　　身体 　　

运行效果如下图所示

CSS伪类nth-child如何使用“> </p> <p>接着使用n -孩子,并进行设置,使背景颜色成为# add8e6,仅应用于特定的列表项目。</p> <p> <强>选择偶数时的情况</强> <br/> </p> <p> nth-child的值设置为甚至或者2 n </p> <p> CSS代码</p> <pre类= ul李:nth-child(甚至){ 　　背景颜色:天蓝色; 　　}

在浏览器上显示如下效果

CSS伪类nth-child如何使用“> </p> <p> <强>选择奇数时的情况</强> </p> <p> nth-child的值设置为奇数或者2 n + 1 </p> <p> CSS代码</p> <pre类= ul李:nth-child(奇数){ 　　背景颜色:天蓝色; 　　}

在浏览器上显示如下效果

CSS伪类nth-child如何使用“> </p> <p> <强>仅选择第n个元素的情况</强> <br/> </p> <p>输入要应用于nth-child值的项目编号。我们在这里输入3 . </p> <p> CSS代码<br/> </p> <pre类= ul李:nth-child (3) { 　　背景颜色:天蓝色; 　　}

在浏览器上显示效果如下

CSS伪类nth-child如何使用“> </p> <p> <强>选择第n个及以上的元素的情况</强> <br/> </p> <p> n +到n -孩子输入要开始应用的项目的数值。这里是n + 4 . </p> <p> CSS代码<br/> </p> <pre类= ul李:nth-child (n + 4) { 　　背景颜色:天蓝色; 　　}

在浏览器上运行效果如下

CSS伪类nth-child如何使用“> </p> <p class=关于CSS伪类nth-child如何使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

CSS伪类nth-child如何使用