CSS 前一个兄弟元素|极客教程

CSS 前一个兄弟元素

在网页开发中，我们经常需要对元素进行样式设置。其中一个常见的需求是需要对元素的前一个兄弟元素进行样式设置。在这种情况下，我们可以使用CSS中的一些选择器来实现这个效果。

什么是前一个兄弟元素？

在HTML文档中，一个元素的前一个兄弟元素是指在DOM树中与该元素相邻并且位于它前面的元素。比如下面的HTML结构：

<div>第一个div</div>
<p>第一个p</p>
<div>第二个div</div>
<p>第二个p</p>

在这个示例中，第一个div的前一个兄弟元素是没有元素，第一个p的前一个兄弟元素是第一个div，第二个div的前一个兄弟元素是第一个p，第二个p的前一个兄弟元素是第二个div。

使用CSS选择器选中前一个兄弟元素

我们可以使用CSS中的一些选择器来选中一个元素的前一个兄弟元素，常用的方式包括：相邻兄弟选择器（Adjacent sibling combinator）和通用兄弟选择器（General sibling combinator）。

相邻兄弟选择器

相邻兄弟选择器用于选中一个元素相邻并且在其前面的指定元素。它的语法是使用“+”符号，比如：

div + p {
  color: red;
}

上面的示例表示选择所有紧接在div元素后面的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>Adjacent sibling selector</title>
    <style>
        div + p {
            color: red;
        }
    </style>
</head>

<body>
    <div>第一个div</div>
    <p>第一个p</p>
    <div>第二个div</div>
    <p>第二个p</p>
</body>

</html>

在这个示例中，第一个p元素的文字颜色会被设置为红色，因为它紧跟在一个div元素后面。

通用兄弟选择器

通用兄弟选择器用于选中一个元素后面的所有兄弟元素，而不仅仅是相邻的兄弟元素。它的语法是使用“~”符号，比如：

div ~ p {
  color: blue;
}

上面的示例表示选择所有在div元素后面的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>General sibling selector</title>
    <style>
        div ~ p {
            color: blue;
        }
    </style>
</head>

<body>
    <div>第一个div</div>
    第一个p
    <div>第二个div</div>
    第二个p
</body>

</html>

在这个示例中，所有的p元素的文字颜色都会被设置为蓝色，因为它们都是在div元素后面的兄弟元素。