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>

结果:



阅读更多
上一篇px、em、rem的区别
下一篇三级菜单
想对作者说点什么? 我来说一句

jdbc和hibernate的区别

2011年09月05日 29KB 下载

throws与throw区别

2010年09月08日 2KB 下载

struts1和struts2的区别

2011年06月24日 3KB 下载

c和c++的区别c和c++的区别

2009年10月04日 25KB 下载

CSS3.0 中文教程

2013年07月23日 367KB 下载

JDK1.4,1.5,1.6的区别

2011年11月13日 35KB 下载

oa与协同的区别000000

2009年06月16日 2KB 下载

Java堆和栈的区别

2010年11月19日 27KB 下载

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

关闭
关闭