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

CSS选择当前元素的上一个兄弟元素

在编写CSS样式时，经常会涉及到选择某个元素的上一个兄弟元素的样式。这在一些布局和设计上是非常有用的。在本文中，我们将详细讨论如何使用CSS选择符来选择当前元素的上一个兄弟元素，并且会给出一些示例代码和运行结果。

使用CSS选择符“~”选择上一个兄弟元素

CSS选择符中的波浪线“~”可以选择当前元素的上一个兄弟元素。这个选择符表明，选中的元素必须是当前元素之前的兄弟元素，但并不需要直接相邻。

下面是一个简单的示例代码，演示如何使用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选择上一个兄弟元素</title>
    <style>
        p ~ p {
            color: red;
        }
    </style>
</head>
<body>
    第一个段落
    第二个段落
    第三个段落
</body>
</html>

在这个示例中，我们使用CSS选择符“p ~ p”选择了所有的段落元素。这意味着第二个和第三个段落会应用红色文本颜色。

进阶示例：选择特定类型的上一个兄弟元素

除了选择所有上一个兄弟元素之外，我们还可以根据特定的元素类型选择上一个兄弟元素。下面是一个进阶示例代码：

<!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选择上一个兄弟元素</title>
    <style>
        div ~ p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是一个div</div>
    第一个段落
    第二个段落
    第三个段落
</body>
</html>

在这个示例中，我们使用CSS选择符“div ~ p”选择了所有的段落元素，但是仅在其前面有一个div元素的情况下才应用蓝色文本颜色。