CSS3中nth-of-type和nth-child选择器区别分析和理解

最新推荐文章于 2024-09-11 09:30:30 发布

ajia5216

最新推荐文章于 2024-09-11 09:30:30 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： CSS nth-child nth-of-type

本文链接：https://blog.csdn.net/ajia5216/article/details/81098909

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

第一层

按照网上的理解，p:nth-of-type(2)表示选择第二个p标签，而p:nth-child(2)表示选择一个p标签并且这个标签是父元素的第二个子元素。p:nth-of-type(2)表示子元素中的第二个p标签。

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
	p:nth-of-type(2){
		color:red;
	}
</style>
<body>
    <p>标签1</p>
	<p>标签2</p>
	<p>标签3</p>
	<p>标签4</p>
	
</body>
	
</html>

运行结果：

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
	p:nth-child(2){
		color:red;
	}
</style>
<body>
    <p>标签2</p>
	<p>标签2</p>
	<p>标签3</p>
	<p>标签4</p>
	
</body>
	
</html>

运行结果：

这两次的运行结果是一样的，都表示第二个p标签。如果在p:nth-child(2)的例子中在第二个p标签之前加上一个<span>标签，结果是：

可以看出，p:nth-child(2)表示的是一个p标签且是第二个子元素。而对于p:nth-of-type(2)无论中间加了多少span标签，都是第二个p标签被选择，

所以，p:nth-of-type(2)表示子元素中的第二个p标签。

第二层

不仅仅是只有p标签或者span标签

例如，在div标签内，存在p标签

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
	p:nth-of-type(2){
		color:red;
	}
</style>
<body>

	<div>
		<p>标签1</p>
		<p>标签2</p>
	</div>
	<span>
		<p>标签3</p>
		<p>标签4</p>
	</span>
	<p>p标签
		<p>标签5</p>
		<p>标签6</p>
		
	</p>
</body>
	
</html>

结果是：

选择的是第二个，div区域和span区域内的第二个p标签都被选择了，如果是p:nth-of-type(3)，

结果是：

如果是 p:nth-of-type(4)，p:nth-of-type(5)，结果都是

结果表明，如果使用 p:nth-of-type，且在像div这样的区域内有p标签，那么div也是父类，不管有多少div，都与body中的p标签平行存在，都相对于被选择。但是对于p标签中的p标签，则不会分子类，会按照顺序进行选择。并且和第一层一样，是选择子元素的第二个p标签。（div区域内的第二个p标签或者body中的第二个p标签）

另外：对于p:nth-child

<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
	p:nth-child(2){
		color:red;
	}
</style>
<body>

	<div>
		<p>标签1</p>
		<p>标签2</p>
	</div>
	<span>
		<p>标签3</p>
		<p>标签4</p>
	</span>
	<p>p标签
		<p>标签5</p>
		<p>标签6</p>
		
	</p>
</body>
	
</html>

结果是：

运行 p:nth-child(3)的结果

运行 p:nth-child(4)的结果，运行 p:nth-child(5)的结果分别是

可以发现，像div这样的标签内的p标签也是相当于子元素，div相当于父元素。但不是像p:nth-of-type(2)那样平行存在且都是父元素的，比如当用到p:nth-child(2)的时候，是选择第二个元素，如果他是p标签，就选择，不是就不选择。根据上面的运行结果可知，div相当于一个子元素，span相当于一个子元素，外层的p标签和p标签内的p标签都相当于一个子元素相当于一个子元素，所以p:nth-child(2)不会选择到外层p标签包裹的p标签。

但是外层p标签和他包裹的p标签会和p:nth-of-type一样，被按照顺序选择，而且会和第一层说明的一样，样式是 p:nth-child(5)，如果第五个元素不是p标签，则不会被选择，示例如下: