nth-child()和nth-of-type()的区别

最新推荐文章于 2022-07-04 17:37:52 发布

夕阳下美了剪影

最新推荐文章于 2022-07-04 17:37:52 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/qq_38401285/article/details/79944954

版权

nth-child()

例如：p:nth-child(3)表示满足父元素下的p元素，并且在父元素下位置排第三。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nth-child()和nth-of-type()</title>
	<style>
	p:nth-child(3){
		color:red;
	}
	</style>
</head>
<body>
	<section>
		<div>第一个div</div>
		<div>第二个div</div>
	        <p>第一个p元素</p>
	        <p>第一个p元素</p>
		<span>第一个span元素</span>
	</section>
</body>
</html>

结果：

nth-of-type()

例如：div:nth-of-type(2):表示父级元素下的第二个div

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nth-child()和nth-of-type()</title>
	<style>
	div:nth-of-type(2){
		color:yellow;
	}
	</style>
</head>
<body>
	<section>
		<div>第一个div</div>	
	        <p>第一个p元素</p>
	        <p>第一个p元素</p>
		<span>第一个span元素</span>
		<div>第二个div</div>
	</section>
</body>
</html>

结果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

夕阳下美了剪影

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-child()和nth-of-type()的区别

nth-child()例如：p:nth-child(3)表示满足父元素下的p元素，并且在父元素下位置排第三。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;nth-child()和nth-of-type()&lt;/title&
复制链接

扫一扫