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

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>

结果:



阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页