解释first-child与first-of-type的区别是什么？

CSS面试题 5月前 0 95

first-child和first-of-type都是CSS中的伪类选择器，用于选中某些特定的元素。它们的区别主要在于选择元素的方式：

first-child：这个选择器会选中其父元素的第一个子元素，不论这个子元素是什么类型的标签。例如，p:first-child会选中每个父元素的第一个子元素，只要这个子元素是<p>标签。
first-of-type：这个选择器会选中其父元素的第一个特定类型的子元素。例如，p:first-of-type会选中每个父元素的第一个<p>元素，不论这个<p>元素在其兄弟元素中的位置如何。

看下面的HTML代码：

<div>
  <span>我是一个 span 标签</span>
  <p>我是一个 p 标签</p>
  <p>我是另一个 p 标签</p>
</div>

在这个例子中，使用p:first-child选择器将不会选中任何元素，因为<div>的第一个子元素是<span>，而不是<p>。但是，如果使用p:first-of-type选择器，那么会选中第一个<p>元素，因为它是<div>的第一个<p>类型的子元素。