css选择器 nth-child(n)和nth-of-type(n)对比

最新推荐文章于 2022-09-16 12:53:57 发布

thomas的小火车

最新推荐文章于 2022-09-16 12:53:57 发布

阅读量479

点赞数

本文链接：https://blog.csdn.net/beiweideqidaozhe/article/details/51790154

版权

</pre>最近在看《图解css3》，发现选择器之间还是有不少坑的。<p></p><p>下面介绍nth-child(n)和nth-of-type(n)之间的区别</p><p>首先介绍一下两个选择器</p><p>:nth-child():用来定位某个父元素的一个或多个特定的子元素</p><p>:nth-of-type():用来定位父元素中某种类型的子元素。</p><p>上面是书中关于这两种选择器的定义。</p><p>接下来，我们以具体的代码进行阐述</p><p></p><pre code_snippet_id="1737231" snippet_file_name="blog_20160630_2_8680556" name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		li{
			display: inline-block;
			border:1px solid #ccc;
			width: 50px;
			height: 50px;
			font:bold 30px/50px arial;
			padding:5px;
			border-radius: 50px;
			text-align: center;
		}
	</style>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<label>3</label>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
</html>

首先使用

ul li:nth-child(-n+4){
	background-color: #0066ff;
}

上图我们可以看出，使用nth-child 的时候再使用li 其实是没有意义的，我们想选取前4个元素，由于加入了li 反而使我们的结果变的很怪

然后我们把 li标签去掉，再试一下

上面的图中我们可以看出，由于去掉了 li标签，所以将ul 下面的前4个元素均选出来了

然后我们说一下 :nth-of-type选择器

如果我们想将ul 下前4个li 标签选择出来

该标签就派上用场了。

ul li:nth-of-type(-n+4){
	background-color: #0066ff;
}

上面的图我们可以看出，该选择器过滤掉了label标签，将前4个li标签选择了出来

在书中，作者对nth-of-type的使用场景进行了说明

1:营造一种有随意感的洁面，

2:使文章中的图片交替着向左向右浮动

3:为一篇文章中的头一段设置不同的样式

4:制作图表

thomas的小火车

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器 nth-child(n)和nth-of-type(n)对比

最近在看《图解css3》，发现选择器之间还是有不少坑的。下面介绍nth-child(n)和nth-of-type(n)之间的区别首先介绍一下两个选择器:nth-child():用来定位某个父元素的一个或多个特定的子元素:nth-of-type():用来定位父元素中某种类型的子元素。上面是书中关于这两种选择器的定义。接下来，我们以具体的代码进行阐述 Docume
复制链接

扫一扫