CSS中的 :first-child 伪类选择器

CSS中的 :first-child 伪类选择器选择某元素在其父元素中的第一个子元素。

语法

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

其中，selector 为要选择的父元素。

示例

假设我们有以下HTML代码：

<div>
  <p>第一个子元素</p>
  <p>第二个子元素</p>
  <h1>第三个子元素</h1>
  <h2>第四个子元素</h2>
</div>

我们可以使用 :first-child 伪类选择器来选择该 div 元素下的第一个子元素，即 p 元素：

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

上面的代码将会使第一个 p 元素的文本内容变为红色。

注意事项

• :first-child 伪类选择器只能匹配到父元素下的第一个子元素，不能匹配到同级的其他元素。
• 如果父元素的第一个子元素不是我们想要的元素类型，那么 :first-child 将会匹配失败。