CSS 关系选择器之兄弟选择器详解

1. 引言

在 CSS 中，选择器（Selector）是样式规则的核心，它决定了哪些 HTML 元素会被应用上对应的样式。除了我们熟知的类选择器、ID 选择器和标签选择器之外，CSS 还提供了一组非常强大的「关系选择器」，用于根据元素在文档结构中的位置关系来精准定位目标元素。

本文将聚焦于关系选择器中的兄弟选择器（Sibling Combinator），深入讲解它的两种形式——相邻兄弟选择器与通用兄弟选择器，并通过大量可运行的代码示例，帮助你彻底掌握这一实用技巧。

2. 什么是兄弟选择器

在 HTML 文档结构中，兄弟元素（Sibling Elements） 指的是拥有同一个父元素的同级元素。例如：

<div class="container">
<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>
<span>行内元素</span>
</div>

在上面的结构中，<h2>、两个 <p> 和 <span> 都是 <div class="container"> 的子元素，它们彼此之间互为兄弟关系。

兄弟选择器正是利用这种同级关系，让我们能够选中某个元素之后（或之前）的兄弟元素。它主要分为两种：

3. 相邻兄弟选择器（+）

3.1 基本语法

相邻兄弟选择器使用加号 + 连接两个选择器，语法如下：

选择器A + 选择器B {
/* 样式声明 */
}

它的匹配规则是：选择器 B 必须紧跟在选择器 A 的后面，且两者拥有同一个父元素。如果 A 和 B 之间隔着其他元素，则无法匹配。

3.2 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器示例</title>
<style>
/* 选中 h2 后面紧跟着的第一个 p 元素 */
h2 + p {
color: #e74c3c;
font-weight: bold;
}
</style>
</head>
<body>
<h2>文章标题</h2>
<p>我是紧跟在 h2 后面的段落，会被选中变红加粗。</p>
<p>我是第二个段落，与 h2 之间隔了一个 p，不会被选中。</p>
</body>
</html>

运行效果：只有第一个 <p> 会被应用红色加粗样式，第二个 <p> 保持默认样式。

3.3 典型应用场景

相邻兄弟选择器最常见的应用场景是表单的提示信息。例如，当输入框校验失败时，让紧随其后的错误提示显示出来：

<style>
/* 默认隐藏错误提示 */
.error-tip {
display: none;
color: #e74c3c;
font-size: 14px;
}

/* 当输入框带有 .invalid 类时，显示紧随其后的错误提示 */
input.invalid + .error-tip {
display: block;
}
</style>

<form>
<div>
<input type="text" class="invalid" placeholder="请输入用户名">
<span class="error-tip">用户名不能为空</span>
</div>
</form>

4. 通用兄弟选择器（~）

4.1 基本语法

通用兄弟选择器使用波浪号 ~ 连接两个选择器，语法如下：

选择器A ~ 选择器B {
/* 样式声明 */
}

它的匹配规则是：选择器 B 与选择器 A 拥有同一个父元素，并且 B 在 A 之后出现。与相邻兄弟选择器不同，B 不需要紧跟在 A 后面，中间可以隔着任意数量的其他元素。

4.2 代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通用兄弟选择器示例</title>
<style>
/* 选中 h2 后面的所有 p 元素 */
h2 ~ p {
background-color: #ecf0f1;
padding: 8px;
}
</style>
</head>
<body>
<h2>文章标题</h2>
<p>我是第一个段落，会被选中。</p>
<div>我是中间的 div，不影响匹配。</div>
<p>我是第二个段落，虽然中间隔了 div，但依然会被选中。</p>
</body>
</html>

运行效果：两个 <p> 元素都会被应用灰色背景和内边距样式，即使它们之间隔着 <div>。

4.3 典型应用场景

通用兄弟选择器非常适合实现**「开关切换」**效果。例如，利用复选框的选中状态来控制后续内容的显示：

<style>
/* 默认隐藏详情内容 */
.details {
display: none;
margin-top: 10px;
padding: 12px;
background: #f8f9fa;
border-radius: 4px;
}

/* 当复选框被选中时，显示其后面的详情内容 */
#toggle:checked ~ .details {
display: block;
}
</style>

<input type="checkbox" id="toggle">
<label for="toggle">查看详情</label>
<div class="details">
这里是展开后的详细内容，通过通用兄弟选择器实现显示与隐藏。
</div>

5. 兄弟选择器对比总结

6. 注意事项

7. 总结

兄弟选择器是 CSS 关系选择器中非常实用的工具：

• 相邻兄弟选择器 + 适合「紧跟其后」的精准定位，常用于表单校验提示。
• 通用兄弟选择器 ~ 适合「之后所有」的批量定位，常用于开关切换等交互效果。

掌握这两种选择器，可以让你在不修改 HTML 结构的前提下，用更简洁的 CSS 实现丰富的页面样式与交互逻辑。建议你在实际项目中多加练习，体会它们在不同场景下的妙用。