定义

:first-child 选择器用于匹配父元素中的第一个子元素。它是一个伪类选择器，仅适用于元素的第一个子元素。

语法

element:first-child {
  /* 样式规则 */
}

其中：

• element 是要应用样式的父元素
• :first-child 是用于选择父元素中第一个子元素的伪类

用例

:first-child 选择器有多种常见用例，包括：

• 为列表中的第一个项目添加样式
• 为段落中的第一个单词添加样式
• 为表格中的第一行添加样式

示例

为列表中的第一个项目添加样式：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

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

为段落中的第一个单词添加样式：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

p:first-child span:first-child {
  font-weight: bold;
}

为表格中的第一行添加样式：

// www.javascriptcn.com code example
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>约翰</td>
    <td>30</td>
  </tr>
  <tr>
    <td>玛丽</td>
    <td>25</td>
  </tr>
</table>

table tr:first-child {
  background-color: #f0f0f0;
}

兼容性

:first-child 选择器在所有现代浏览器中都得到广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

注意事项

• :first-child 选择器只匹配直接子元素。它不会匹配间接子元素或后代元素。
• 如果父元素没有子元素，:first-child 选择器不会匹配任何元素。
• 如果父元素有多个子元素，:first-child 选择器仅匹配第一个子元素。
• :first-child 选择器可以与其他选择器结合使用以实现更复杂的样式。