CSS上一个兄弟元素的选择器|极客教程

CSS上一个兄弟元素的选择器

在CSS中，要选择一个元素的上一个兄弟元素，我们可以使用:nth-child伪类或者:nth-of-type伪类来实现。本文将详细介绍如何使用这两种伪类来选择元素的上一个兄弟元素，并给出一些示例代码和运行结果。

使用:nth-child伪类

:nth-child伪类用于选择一个父元素的第N个子元素，无论子元素类型如何。我们可以利用这个伪类来选择一个元素的上一个兄弟元素。下面是一个示例代码：

div:nth-child(2) {
    background-color: lightblue;
}

在上面的示例中，我们选择了一个div元素的第二个兄弟元素并设置了背景颜色为浅蓝色。这样就成功选中了这个元素的上一个兄弟元素。

使用:nth-of-type伪类

与:nth-child伪类不同，:nth-of-type伪类只选择指定类型的元素。通过这个伪类，我们可以更精确地选择上一个兄弟元素。下面是一个示例代码：

div:nth-of-type(2) {
    color: red;
}

在上面的示例中，我们选择了第二个div元素并将其文字颜色设置为红色。这样就成功选中了这个元素的上一个兄弟元素。

示例代码

接下来，我们将给出一个更完整的示例代码，以展示如何使用:nth-child和:nth-of-type伪类选择上一个兄弟元素：

<!DOCTYPE html>
<html>
<head>
    <title>CSS上一个兄弟元素选择器示例</title>
    <style>
        /* 使用:nth-child伪类选择上一个兄弟元素 */
        div:nth-child(1) {
            background-color: lightblue;
        }

        /* 使用:nth-of-type伪类选择上一个兄弟元素 */
        p:nth-of-type(2) {
            color: red;
        }
    </style>
</head>
<body>
    <div>第一个div元素</div>
    <div>第二个div元素</div>
    <p>第一个p元素</p>
    <p>第二个p元素</p>
</body>
</html>

在上面的示例代码中，我们创建了两个div元素和两个p元素。通过:nth-child和:nth-of-type伪类，我们分别选择了第一个div元素和第二个p元素，并对它们应用了样式。