CSS 第一个元素

CSS（Cascading Style Sheets），层叠样式表，是一种用于描述文档外观和样式的标记语言。在HTML中，我们可以使用CSS来定义网页的布局、颜色、字体、间距等各种样式。

本文将详细讲解CSS中的一个重要概念——第一个元素（:first-child），并给出一些示例代码和运行结果。

什么是第一个元素（:first-child）

在CSS中，我们可以使用:first-child伪元素来选择一个父元素下的第一个子元素。

语法格式如下：

父元素:first-child {
  /* 样式代码 */
}

这里的“第一个子元素”指的是在HTML文档中，作为某个父元素的直接子元素时的排位。

示例代码1：给第一个段落添加特定样式

让我们通过一个示例来演示如何使用:first-child来选择第一个元素。假设我们有如下HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>示例代码</title>
  <style>
    p:first-child {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
  </div>
</body>
</html>

在上面的示例中，我们给父元素<div>下的第一个<p>元素（即“这是第一个段落。”）添加了红色文本颜色样式。

运行上述示例代码，可以看到第一个段落的文本颜色被设置为红色。

示例代码2：注意使用:first-child和:first-of-type的区别

:first-child选择的是父元素下的第一个子元素，而:first-of-type选择的是父元素下同种类型的第一个子元素。

让我们通过一个示例来说明这两者的区别。假设我们有如下HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>示例代码</title>
  <style>
    p:first-child {
      color: red;
    }
    p:first-of-type {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div>
    <p>这是第一个段落。</p>
    <h2>这是一个标题。</h2>
    <p>这是第二个段落。</p>
    <p>这是第三个段落。</p>
    <h2>这是另一个标题。</h2>
  </div>
</body>
</html>

在上面的示例中，我们给<div>下的第一个<p>元素（即“这是第一个段落。”）设置了红色文本颜色，并给<div>下的第一个<p>元素（即“这是第一个段落。”）和<div>下的第一个<h2>元素（即“这是一个标题。”）设置了粗体样式。

通过运行上述示例代码，可以看到第一个段落的文本颜色被设置为红色，并且第一个段落和第一个标题都应用了粗体样式。

这是因为:first-child选择的是第一个子元素，而:first-of-type选择的是同类型的第一个子元素。