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>结果：
