CSS nth-child 选择第一个兄弟对象

在CSS中，:nth-child 伪类允许我们选择父元素中特定位置的子元素。其中，:nth-child(1) 表示选择父元素中的第一个子元素。在这篇文章中，我们将详细介绍如何使用 :nth-child(1) 来选择第一个兄弟对象，并给出一些示例代码和效果演示。

语法

:nth-child 伪类的基本语法如下：

:nth-child(an + b)

n 表示子元素在父元素中的索引值。
an 和 b 是整数，可以为正数、负数或零。

在选择第一个兄弟对象时，我们可以使用 :nth-child(1)，其中 1 就代表选择第一个子元素。而 :nth-child(n) 则表示匹配父元素中所有的子元素。

选择第一个兄弟对象

为了演示如何选择第一个兄弟对象，我们创建一个简单的HTML结构，包含一个父元素和几个子元素：

<div class="parent">
    <div>子元素1</div>
    <div>子元素2</div>
    <div>子元素3</div>
    <div>子元素4</div>
    <div>子元素5</div>
</div>

接下来，我们使用CSS样式来选中父元素中的第一个子元素，并对其进行样式设置：

.parent div:nth-child(1) {
    color: red;
    font-weight: bold;
}

在这段CSS代码中，我们使用了 :nth-child(1) 来选择第一个子元素，并设置了文字颜色为红色，加粗显示。通过这段代码，我们可以看到第一个子元素的样式发生了变化，而其他子元素保持默认样式。

示例代码

下面我们给出一个完整的示例代码，包含HTML结构和CSS样式，可以直观地看到选择第一个兄弟对象的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS nth-child 选择第一个兄弟对象</title>
    <style>
        .parent div:nth-child(1) {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div>子元素1</div>
        <div>子元素2</div>
        <div>子元素3</div>
        <div>子元素4</div>
        <div>子元素5</div>
    </div>
</body>
</html>

在上面的示例代码中，我们定义了一个 .parent 父元素和五个子元素，通过 :nth-child(1) 选择第一个子元素，并设置其样式为红色和加粗。

运行结果

通过运行上面的示例代码，我们可以看到第一个子元素的样式发生了改变，变成了红色和加粗的文字，效果如下所示：

子元素1
子元素2
子元素3
子元素4
子元素5

通过这个示例，我们可以清楚地了解如何使用 :nth-child(1) 选择第一个兄弟对象，并对其进行样式设置。

总结一下，:nth-child(1) 是一个非常有用的CSS伪类，可以帮助我们方便地选择父元素中的第一个子元素，从而实现不同的样式效果。

CSS nth-child 选择第一个兄弟对象