first-child选择器

:first-child选择器是CSS中的一个伪类选择器，用于选择元素的第一个子元素。具体使用方法如下：

语法：

selector:first-child {
  /* CSS属性 */
}

示例：

<ul>
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
</ul>

ul li:first-child {
  color: red;
}

上面的CSS代码将选择第一个li元素，并设置其颜色为红色。

注意：

- :first-child选择器只能选中作为父元素第一个子元素的子元素。如果第一个子元素不符合选择器条件，则不会选中任何元素。
- :first-child选择器只能选中直接子元素，不能选中孙子元素或更深层次的后代元素。

相关问题

first-child last-child nth-child

`first-child`, `last-child`, 和 `nth-child` 是 CSS 选择器，它们用于选取 HTML 元素集合中的特定元素。

1. **first-child**: 这个选择器匹配列表（如有序列表 `<ol>` 或无序列表 `<ul>`) 中的第一个子元素。它只对那些有兄弟元素的元素生效，如果某个元素是列表的第一个项目，那么它就是 `first-child`。

2. **last-child**: 类似地，`last-child` 匹配列表中的最后一个子元素。同样，这个选择器仅对有兄弟元素的元素起作用。

3. **nth-child**: 这是一个更通用的选择器，它可以指定元素在父元素中是第几个孩子。例如，`:nth-child(2)` 会匹配所有元素的第二个子元素，`:nth-child(even)` 则匹配所有的偶数索引位置的元素，`:nth-child(odd)` 则匹配奇数索引位置的元素。

这些选择器常用于布局调整、样式应用等场景，可以根据元素的位置关系动态改变样式的呈现。

first-child和first-of-type

first-child和first-of-type都是CSS选择器中的伪类，用于选择元素中的第一个子元素。

first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。

而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。

举个例子，如果有如下HTML代码：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <span>第一个span</span>
  <p>第三个段落</p>
  <span>第二个span</span>
</div>

使用first-child选择器选择第一个子元素，结果是第一个段落：

div p:first-child {
  color: red;
}

而使用first-of-type选择器选择第一个段落，结果也是第一个段落：

div p:first-of-type {
  color: red;
}

但如果选择第一个span，使用first-child选择器会选择不到，因为第一个子元素是一个段落，而不是span：

div span:first-child {
  color: red;
}

而使用first-of-type选择器则可以选择到第一个span：

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