CSS First Child

CSS 选择器 :first-child 允许我们将第一个元素的样式直接应用到其他元素上。根据 CSS Selectors Level 3 规范，它被称为结构性伪类，因为它根据内容与其父内容和兄弟内容的关系来设置样式。

语法

示例

输出

示例

让我们看一个 First-child CSS 的例子，以便更好地理解它们的区别。

代码

First-child CSS 的 HTML 源代码。

输出

说明

上述代码的主体部分由一个 div 标签（div>）组成，div 标签内部有几个段落标签（p>），内容各不相同。我们在 head 块内应用了内部或嵌入式 CSS，使用 :first-child 选择器（p:first-child）为 div 标签内的 p 标签设置样式，它会自动识别 div 标签内的第一个段落元素。然而，我们不需要为 p 标签创建一个类。我们可以为第一个元素（段落）添加样式。

CSS 的 First Child 是如何工作的？

first-child CSS 选择器常用于为父元素内的第一个元素的内容设置样式。它会查找父元素的第一个子元素。first-child 是一个伪类，属于基于位置和结构的类。

first-child 类会尝试匹配父元素的第一个直接子元素，而不会检查同一类型的其他兄弟元素。如果多个元素的父元素相同，first-child 可以定位到多个元素。

CSS 中 First Child 的类与示例

现在我们理解了 CSS 中的 first-child，让我们看一些关于 CSS 中 first-child 如何与其他类链接使用的例子。

使用段落 <p> 标签

可以使用 <p> 段落标签应用 first-child CSS。first-child CSS 将只为父标签内的第一个段落元素设置样式，并忽略其余元素。换句话说，如果我们使用 first-child 选择器为段落标签添加样式，其余的段落标签将不会应用任何样式。

语法

示例

为了更好地理解，让我们看一个使用 CSS 段落标签 <p> 的 first-child CSS 示例。

输出

说明

1. first-child CSS 代码的主体块由两个 div 标签 (<div>) 组成。
2. 第一个 div 元素包含不同内容的 <p> 段落标签。
3. 另一个 div 标签内可以找到一个标题标签 (h) 和一个具有不同内容的段落标签 <p>。
4. 我们在 head 块内应用了内部或嵌入式 CSS，使用 first-child 选择器 (p:first-child) 为 div 标签内的 p 标签设置样式，它会自动识别第一个 div 标签内的第一个段落元素。然而，我们不需要为 p 标签创建类。我们可以为该第一个元素（段落）添加样式。
5. 但是第二个 div 标签有一个标题标签，即 <h>。我们可以看到第二个 div 标签内的段落标签没有被设置样式，因为如果段落标签 p 之前存在标题或其他标签，first-child 将无法立即获取到父标签内的第一个段落标签元素。

使用 Span 标签 <span>

可以使用 span 标签或 "span" 来应用 first-child 的 CSS。因此，如果我们使用 first-child 选择器为 span 标签应用样式，只有第一个 span 标签会被设置样式，而其余的 span 标签则不会被处理。first-child 将定位父标签内的第一个 span 元素，其余的将被忽略。

语法

示例

为了更好地理解，让我们看一个在 CSS 中使用 span 标签的 first-child CSS 示例。

输出

说明

1. 在上面的代码中，主体块由两个 div 标签 <div> 组成。
2. 第一个 div 元素内有多个段落标签 <p>，其中包含不同的 snap 标签 <span>。
3. 另一个 div 标签内包含一个标题标签 <h> 和一个带有 snap 标签 <span> 的段落标签 <p>。
4. 我们在 head 块内应用了内部或嵌入式 CSS，并为段落标签内的 snap 标签设置了样式。但是，我们不需要为 snap 标签创建类；相反，我们可以使用 first-child 选择器 (p:first-child) 来立即识别第一个 div 标签内的第一个 snap 标签元素。我们可以给初始元素 (snap) 一些样式。段落中有两个 snap 标签，但我们可以看到，只有第一个标签被设置了样式，其他的都被忽略了。
5. 我们可以看到 first-child 是如何在第二个 div 标签中寻找第一个 snap 标签并为其设置样式的。元素必须是其父标签内兄弟元素中的第一个，才能被 first-child 定位；否则，它将不会被选中。

使用 <tr> 行标签

我们可以使用行标签 <tr> 来应用 CSS 的 first-child。因此，如果我们使用 first-child 选择器为行标签应用样式，只有第一个行标签会被设置样式，其余的行标签则不会。first-child 将定位父标签内的第一个行元素，其余的将被忽略。

语法

示例

为了更好地理解，让我们看一个在 CSS 中使用行标签 <tr> 的 first-child CSS 示例。

输出

说明

1. 上面代码的主体块包含用于学生信息的表格标签 <table>。
2. 表格标签 <table> 内有多个行标签 <tr>，第一行标签包含学生的学号、姓名和分数等表头。其余的行标签包含学生的数据。
3. 为了给表格标签 <table> 内的行标签 <tr> 添加样式，我们在 head 块内应用了内部或嵌入式 CSS。然而，我们不需要为行标签创建类；相反，我们只使用 first-child 选择器 (p:first-child)，它会自动识别表格标签内的第一个行标签 <tr> 元素。我们可以为作为第一个元素的行标签设置样式。表格内有多个行标签。然而，正如我们所见，第一个标签被设置了样式，而其余的则被忽略了。

结论

在本文中，我们学习了 CSS 的 first-child。以下是本文中关于 first-child 的总结。

1. 在 CSS 中，first-child (:first-child) 选择器使我们能够立即将第一个元素的样式应用到另一个元素上。
2. first-child 根据内容与其父元素和兄弟元素内容的关系来设置样式。
3. first-child 是一个伪类，属于基于位置和结构的类。first-child 类会尝试匹配父元素的第一个直接子元素，而不会检查同一类型的其他兄弟元素。