css选择器中:first-child与:first-of-type的区别 - 无双 - 博客园
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-of-type</title>
<style>
/*定位父元素.wrapper下的span类型的第一个span元素*/
span:first-child {
background: red;
}
/*无效选择器【因为p没有在.wrapper的第一个位置】*/
p:first-child {
background: red;
}
/*定位父元素.wrapper下的p类型的第一个p元素*/
p:first-of-type {
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<span>我是第一个span元素</span>
<p>我是第一个段落</p>
<p>我是第二个段落</p>
<div>我是第一个Div元素</div>
<div>我是第二个Div元素</div>
<p>我是第三个段落</p>
<p>我是第四个段落</p>
<div>我是第三个Div元素</div>
<div>我是第四个Div元素</div>
</div>
</body>
</html>