提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS伪类nth-child怎样运用【css教程】,nth-child

CSS中有一个伪类nth-child,这个伪类该怎样运用呢?接下来的这篇文章就来给人人引见一下CSS中的伪类nth-child的运用方法,我们来看细致的内容。

nth-child是一个伪类,它为挑选器增加前提,并许可您将款式运用于子元素的第n个(nth)。

当你想要交替设置背景色彩以便在包括很多项目的表格中轻松检察时,nth-child就变得异常有效。

下面我们就来看nth-child的运用方法

nth-child的形貌以下

元素:nth-child(值){款式的内容}

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

仅运用于偶数时: 2n或even
仅运用于奇数: 2n+1或odd

另有其他状况,下面我们来看细致的运用实例

起首HTML代码以下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<ul type="square">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
</body>
</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怎样运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS伪类nth-child怎样运用【css教程】,nth-child"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线