CSS 选择器 :first-child

简介

:first-child 是一个 CSS 伪类选择器，用于匹配某个父元素下的第一个子元素。当某个元素是其父元素的第一个子元素时，:first-child 会选择这个元素并应用相应的样式。

适用范围

:first-child 可以应用于任何 HTML 元素，但要注意它只在该元素是其父元素的第一个子元素时才生效。

使用场景

• 当需要为特定的子元素设置样式时，可以使用 :first-child 来区分。
• 在表格或者列表中，想要对第一行或第一列进行特殊处理时。

示例

假设我们有以下 HTML 结构：

<div class="parent">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>

我们可以使用 :first-child 来单独设置第一个段落的样式：

.parent p:first-child {
  color: red;
  font-weight: bold;
}

这样，第一个段落的文字颜色将变为红色，并且加粗显示。

嵌套使用

:first-child 可以与其他选择器一起使用，以实现更复杂的样式控制。例如，如果我们只想改变某个特定类别的第一个子元素的样式，可以这样做：

<div class="container">
  <div class="item">第一个项目</div>
  <div class="item">第二个项目</div>
  <div class="item">第三个项目</div>
</div>

.container .item:first-child {
  background-color: yellow;
}

这样，只有 .container 中的第一个 .item 类会被应用背景色为黄色的样式。

注意事项

• :first-child 不仅适用于段落（<p>），而是适用于任何 HTML 元素。
• 如果一个元素不是其父元素的第一个子元素，那么它不会被 :first-child 选中。
• 要注意 :first-child 和 :nth-child(1) 的区别：:first-child 只会选择第一个子元素，而 :nth-child(1) 会匹配任何父元素下的第一个子元素，无论它们是什么类型的元素。

实践建议

• 在使用 :first-child 之前，先检查目标元素是否确实是其父元素的第一个子元素。
• 考虑到浏览器兼容性，尽管 :first-child 是 CSS2 的一部分，但在一些旧版本的浏览器中可能不被支持。因此，在使用时，最好先确认目标浏览器的兼容情况。
• 对于复杂的布局和样式需求，可以结合其他选择器（如 :last-child, :nth-child 等）一起使用，以达到更精确的效果。

通过上述介绍，希望能帮助大家更好地理解和运用 CSS 中的 :first-child 选择器。在实际开发中，合理地利用 :first-child 可以有效地提升页面的美观度和用户体验。