hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

CSS伪类nth-child怎样运用【html5教程】

2019-11-26HTML搜搜PHP网54°c
A+ A-
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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS伪类nth-child怎样运用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: