css选择器:first-child和:first-of-type区别

:first-child匹配父元素的第一个子元素。必须是第一个且必须符合:前的标签名或类名或id

<div>
<h1>第一个h1</h1>
<p>第一个p元素<p>
<p>第二个p元素<p>
</div>

上面的代码，若用p:first-child()去匹配则匹配不到p元素，因为此时p标签不是其父元素的第一个子元素。

:first-of-type匹配父元素的第一个符合条件的子元素，该元素不必要必须是第一个子元素，需要符合:前的标签名或类名或id

//还是这个代码
<div>
<h1>第一个h1</h1>
<p>第一个p元素<p>
<p>第二个p元素<p>
</div>

还是上面的代码，用p:first-child()去匹配是匹配不到p元素的，但是若用:first-of-type去匹配则可以匹配到p元素，因为:first-of-type要求只要是第一个出现的子元素即可。