CSS 相邻兄弟选择器
相邻兄弟选择器 (+) 用于选择紧跟在指定元素之后出现的第一个同级元素，并对其应用样式。
1. 语法
相邻兄弟选择器的语法非常简单，它使用加号 (+) 连接两个元素选择器：
element1 + element2 {
/* 样式规则 */
}
- element1：前一个元素选择器，用于指定要匹配的第一个元素。
- element2：后一个元素选择器，用于指定要匹配的第二个元素。
- /* 样式规则 */：要应用于第二个元素的 CSS 样式规则。
2. 工作原理
- 相邻兄弟选择器只选择紧跟在第一个元素之后的第一个兄弟元素。
- 两个元素必须具有相同的父元素。
- 元素之间的空白和注释不会影响选择器的匹配。
3. 示例
以下是一些使用相邻兄弟选择器的示例：
示例 1：选择紧跟在 h2 元素之后的第一个 p 元素
<h2>标题</h2>
<p>这是一个段落，紧跟在 h2 元素之后。</p>
<p>这是另一个段落。</p>
h2 + p {
margin-top: 0;
}
在这个例子中，只有第一个段落会应用
margin-top: 0;
的样式，因为它是紧跟在
h2
元素之后的第一个
p
元素。
示例 2：选择紧跟在 class 为 "warning" 的 div 元素之后的第一个 p 元素
<div class="warning">警告！</div>
<p>这是一个重要的提示。</p>
<p>这是另一个段落。</p>
div.warning + p {
font-weight: bold;
}
在这个例子中，只有第一个段落会应用
font-weight: bold;
的样式，因为它是紧跟在 class 为
"warning"
的
div
元素之后的第一个
p
元素。
4. 注意
- 相邻兄弟选择器不会选择第一个元素，只会选择第二个元素。
- 如果第一个元素和第二个元素之间存在其他类型的元素，则选择器不会匹配。
5. 浏览器兼容性
所有主流浏览器都支持相邻兄弟选择器，包括：
| 浏览器 | 版本 |
|---|---|
| Chrome | 4+ |
| Firefox | 3.5+ |
| Safari | 3.1+ |
| Opera | 9.5+ |
| Internet Explorer | 7+ |
| Edge | 所有版本 |
参考文章
常见问题解答
1. 相邻兄弟选择器和普通兄弟选择器的区别是什么？
相邻兄弟选择器 (+) 只选择紧跟在指定元素之后的第一个兄弟元素，而普通兄弟选择器 (~)
可以选择指定元素之后的所有兄弟元素。
2. 相邻兄弟选择器可以用于选择父元素吗？
不可以，相邻兄弟选择器只能用于选择兄弟元素，不能用于选择父元素。
3. 如何提高相邻兄弟选择器的性能？
相邻兄弟选择器的性能通常不是问题，因为它只匹配紧跟在指定元素之后的第一个兄弟元素。但是，为了提高性能，可以尽量使用更具体的选择器，并避免在大型文档中使用过于复杂的选择器。