css选中父元素下的第一个子元素(:first-child)

在 CSS 中，我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个完整攻略，包含了如何使用 :first-child 伪类选中父元素下的第一个子元素的过程和两个示例说明。

使用 :first-child 伪类选中父元素下的第一个子元素

我们可以使用 :first-child 伪类来选中父元素下的第一个子元素。下面是一个示例：

<div class="parent">
  <div>第一个子元素</div>
  <div>第二个子元素</div>
  <div>第三个子元素</div>
</div>

.parent div:first-child {
  color: red;
}

上述代码中，我们使用 :first-child 伪类来选中父元素 .parent 下的第一个子元素 div，并将其文本颜色设置为红色。

示例说明

下面是两个示例，演示如何使用 :first-child 伪类选中父元素下的第一个子元素。

示例一：选中第一个 li 元素

<ul class="list">
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
</ul>

.list li:first-child {
  color: red;
}

上述代码中，我们使用 :first-child 伪类来选中父元素 .list 下的第一个子元素 li，并将其文本颜色设置为红色。

示例二：选中第一个 p 元素

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

.content p:first-child {
  font-weight: bold;
}

上述代码中，我们使用 :first-child 伪类来选中父元素 .content 下的第一个子元素 p，并将其字体加粗。