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

第一层

按照网上的理解,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标签,则不会被选择,示例如下:

在标签6前面没有没有加span时,标签6时第五个子元素,加上之后变成第六个子元素 

 

刚入门,小白(刚看到CSS选择器哦)。暂时对这两个属性的理解和分析。如果有人看到不对的地方,还望理解。

如果后面发现不对,会修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值