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

八股文_CSS面试题 0 57

参考回答

first-child和first-of-type都是CSS伪类，用于选择特定元素，但它们的选择规则不同：

first-child：选中其父元素中的第一个子元素，不管这个子元素是什么类型。
first-of-type：选中其父元素中第一个指定类型的子元素。

详细讲解与拓展

虽然first-child和first-of-type看起来类似，但它们有本质的区别，理解这些区别有助于你在选择器中做出更精确的选择。

1. first-child

first-child选择的是父元素中的第一个子元素，不管它是什么类型。这个伪类会匹配父元素的第一个子元素，只要它是第一个直接子元素，不论其标签、类型或类名是什么。
例如，假设我们有以下HTML：
```
<div>
<p>First paragraph</p>
<span>First span</span>
<p>Second paragraph</p>
</div>
```
如果你使用div p:first-child，它会选择第一个<p>元素，因为它是父元素<div>中的第一个子元素。

但是，如果你使用div span:first-child，它不会选中<span>，因为<span>不是父元素<div>中的第一个子元素（<p>是第一个子元素）。

2. first-of-type

first-of-type选择的是父元素中指定类型的第一个子元素。也就是说，它会选择第一个符合给定类型的元素，而不是单纯的第一个子元素。这里的“类型”指的是HTML标签名称。
例如，假设我们有以下HTML：
```
<div>
<p>First paragraph</p>
<span>First span</span>
<p>Second paragraph</p>
</div>
```
如果你使用div p:first-of-type，它会选中第一个<p>元素，因为这是父元素<div>中第一个<p>类型的元素。

但是，如果你使用div span:first-of-type，它会选中<span>，因为这是父元素<div>中第一个<span>类型的元素，尽管<span>并不是第一个子元素。

总结：

first-child：选择父元素中的第一个子元素，不管它是什么类型。
first-of-type：选择父元素中第一个指定类型的子元素。

使用场景：
– 使用first-child时，如果你需要确保选择的是父元素的第一个子元素，而不关心它是什么类型。
– 使用first-of-type时，如果你需要选择父元素中的第一个特定类型的元素，比如第一个<p>、第一个<div>等。

发表评论取消回复

后才能评论