CSS 兄弟选择器

在 CSS 中，我们可以使用兄弟选择器来选择同一父元素下的兄弟元素。CSS 有以下 2 种兄弟选择器：

相邻兄弟选择器（+）。
通用兄弟选择器（~）。

CSS 相邻兄弟选择器

在 CSS 中，相邻兄弟选择器只会选择器紧跟着元素 A 之后的第一个元素 B。相邻兄弟选择器很好理解嘛，它选中的元素首先是同级的兄弟元素，并且该元素是 “相邻（紧跟后面）” 的。

语法：

A + B {
    ……
}

说明：

在相邻兄弟选择器中，A 元素和 B 元素之间用 “+” 隔开，表示选中紧跟着 A 元素后面的下一个 B 元素。

示例 1：相邻兄弟选择器（+）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #inner + p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="lvye">
        <p>这是子元素</p>
        <p>这是子元素</p>
        <div id="inner">
            <p>这是子元素的子元素</p>
            <p>这是子元素的子元素</p>
        </div>
        <p>这是子元素</p>
        <p>这是子元素</p>
    </div>
</body>
</html>

页面效果如下图所示。

CSS 相邻兄弟选择器示例

分析：

#inner + p 表示选取 id="inner" 的元素后面的 “相邻” 的兄弟元素 p。

示例 2：相邻兄弟选择器的应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        li + li { 
            border-top: 2px solid red; 
        }
    </style>
</head>
<body>
    <ul>
        <li> 第 1 个元素 </li>
        <li> 第 2 个元素 </li>
        <li> 第 3 个元素 </li>
        <li> 第 4 个元素 </li>
        <li> 第 5 个元素 </li>
        <li> 第 6 个元素 </li>
    </ul>
</body>
</html>

页面效果如下图所示。

CSS 相邻兄弟选择器的应用

分析：

“li + li” 使用的是相邻兄弟选择器，表示 “选择 li 元素相邻的下一个 li 元素”。由于最后一个 li 元素没有相邻的下一个 li 元素，所以对于最后一个 li 元素，它是没有下一个 li 元素可以选取的。li + li { border-top: 2px solid red; } 达到在两两 li 元素之间添加一个边框的效果。

这是一个非常棒的技巧，在实际开发中如果想要在两两元素之间实现什么效果（border、margin 等），我们会经常用到这个技巧！小伙伴们一定要重点掌握。

CSS 通用兄弟选择器

在 CSS 中，通用兄弟选择器会选取所有跟在元素 A 之后的元素 B，只要它们有相同的父元素。

语法：

A~B {
    ……
}

说明：

在通用兄弟选择器中，A 元素和 B 元素之间用 “~” 隔开，表示选中与 A 元素后面同级的所有 B 元素。

示例 3：通用兄弟选择器（~）

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #inner ~ p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="lvye">
        <p>这是子元素</p>
        <p>这是子元素</p>
        <div id="inner">
            <p>这是子元素的子元素</p>
            <p>这是子元素的子元素</p>
        </div>
        <p>这是子元素</p>
        <p>这是子元素</p>
    </div>
</body>
</html>

页面效果如下图所示。

CSS 通用兄弟选择器示例

分析：

#inner~p 表示选取 id="inner" 的元素后面的所有兄弟元素 p。记住，兄弟选择器只选取后面的所有兄弟元素，不包括前面的所有兄弟元素。

相邻兄弟选择器 vs 通用兄弟选择器

在 CSS 中，相邻兄弟选择器与通用兄弟选择器非常相似，不过两者也有明显的区别。

相邻兄弟选择器：选取元素后面 “相邻” 的某一个元素。
通用兄弟选择器：选取元素后面 “所有” 的某一类元素。

注意: 不管是相邻兄弟选择器，还是通用兄弟选择器，它们都无法选取元素 “前面” 的元素。

示例 4：相邻兄弟选择器 vs 通用兄弟选择器

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 通用兄弟选择器 */
        h2 ~ p { color: blue; }
        
        /* 相邻兄弟选择器 */
        h2 + p { color: red; }
    </style>
</head>
<body>
    <div>
        <h2>标题</h2>
        <p>段落1</p>
        <p>段落2</p>
    </div>
</body>
</html>

页面效果如下图所示。

相邻兄弟选择器 vs 通用兄弟选择器

分析：

首先我们要清楚，相邻兄弟选择器和通用兄弟选择器的优先级是相同的。如果两者都存在，那么后来者会覆盖先来者。

h2 ~ p { color: blue; } 会选择 h2 后面所有的 p 元素，并设置颜色为蓝色。如果没有后面的 h2 + p { color: red; }，那么所有的 p 都是蓝色。

但由于后面存在 h2 + p { color: red; }，而 h2 + p { color: red; } 只会选择 h2 的下一个 p 元素，并设置其颜色为红色。因此最终，第一个 p 元素颜色为红色，第二个 p 元素颜色为蓝色。