CSS first-chjld伪类属性匹配一个序列的第一个元素

CSS中的:first-child伪类选择器可以匹配一个元素的第一个子元素。这意味着，如果一个元素有多个子元素，:first-child伪类选择器会选择第一个子元素。相应地，CSS中的:first-of-type伪类选择器也可以选择一个元素的第一个指定类型的子元素。但是有时候我们想要选择一个序列的第一个元素，而不仅仅是该元素的子元素。为了实现这个目的，我们可以使用:first-child伪类选择器的变体:first-of-type。

:first-of-type伪类选择元素的第一个符合指定类型的元素，而不考虑它是不是该序列的第一个元素。我们可以用这种方式来选择一个序列的第一个元素。

下面是一个示例，假设我们有一个HTML代码片段：

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
</ul>

如果我们想要选择序列中的第一个元素，我们可以使用:first-of-type伪类选择器，如下所示：

li:first-of-type {
    color: red;
}

这将选择序列中的第一个li元素，即“第一个元素”，并使其文字变为红色。

下面是另一个示例，假设我们有另一个HTML代码片段：

<div>
  <span>第一个元素</span>
  <span>第二个元素</span>
  <span>第三个元素</span>
</div>

如果我们想要选择序列中的第一个元素，我们可以使用:first-of-type伪类选择器，如下所示：

div > span:first-of-type {
    color: red;
}

这将选择序列中的第一个span元素，即“第一个元素”，并使其文字变为红色。请注意，我们加了一个“>”符号，因为我们只想匹配直接作为div子元素的span元素，而不是嵌套在其他元素中的span元素。