CSS相邻兄弟选择器 (+) 工作原理详解
css中的相邻兄弟选择器（+）是一个非常实用的选择器，它允许我们选择紧跟在另一个指定元素之后的同级元素。理解其工作原理的关键在于两个核心概念：“相邻”和“兄弟”。
- 兄弟关系（Sibling）：两个元素必须拥有相同的父元素，它们才被认为是兄弟元素。例如，在一个<div>内部的两个<p>标签就是兄弟元素。
- 相邻关系（Adjacent）：被选择的元素必须是紧随在指定元素之后的那一个元素。这意味着选择器只能查找在DOM结构中排在其前面的元素的下一个元素，而不能是其前面的元素。
因此，A + B 的含义是：选择紧跟在元素 A 之后的第一个兄弟元素 B。如果 B 不在 A 之后，或者 B 不是 A 的直接兄弟，那么这个选择器将不会匹配到任何元素。
常见问题分析：悬停显示失效
在实际开发中，开发者有时会遇到使用相邻兄弟选择器实现悬停效果时，元素未能按预期显示的问题。这通常是由于HTML结构不符合相邻兄弟选择器的要求所致。
考虑以下HTML和CSS代码示例，旨在实现当鼠标悬停在.container元素上时，.container-1元素显示出来：
原始HTML结构（存在问题）:
立即学习“前端免费学习笔记（深入）”；
<div class="container-1">
<p><b>$167</b> still needed for this project</p>
</div>
<div class="container">
<div class="w3-light-grey" id="bar">
<div class="w3-orange" style="height: 18px;width:75%"></div>
</div>
<div class="box-1">
<p>
<span>
<b style="color:orange;">Only 3 days left</b> to fund this project
</span><br>
<span>
Join the <b>42</b> other donors who have already supported this project. Ever dollar helps.
</span>
</p>
<div>
<input type="text" class="field">
<input type="button" class="btn" value="Give Now"><br>
<span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
</div>
</div>
</div>CSS样式:
.container:hover + .container-1 {
display: block;
color: blue;
}
.container-1 {
display: none; /* 默认隐藏 */
margin-bottom: 15px;
padding: 12px 0;
border-radius: 3px;
background-color: rgb(70, 70, 70);
}问题描述: 尽管CSS中定义了当.container被悬停时，其相邻兄弟.container-1应该display: block，但实际效果是.container-1始终保持display: none，不会在悬停时显示。
原因分析: 问题的根源在于HTML的结构。在上述代码中，.container-1元素在DOM结构中位于.container元素之前。而相邻兄弟选择器+仅能选择紧随其后的兄弟元素。由于.container-1并非紧随在.container之后，所以.container:hover + .container-1这个选择器永远不会匹配到任何元素，导致悬停效果失效。
解决方案：调整HTML结构
要解决这个问题，只需将.container-1元素移动到.container元素的后面，使其成为.container的紧邻兄弟。
修正后的HTML结构:
<div class="container">
<div class="w3-light-grey" id="bar">
<div class="w3-orange" style="height: 18px;width:75%"></div>
</div>
<div class="box-1">
<p>
<span><b style="color:orange;">Only 3 days left</b> to fund this project</span>
<br>
<span>Join the <b>42</b> other donors who have already supported this project. Ever dollar helps.</span>
</p>
<div>
<input type="text" class="field">
<input type="button" class="btn" value="Give Now"><br>
<span><b style="color:rgb(110, 200, 235);">Why give $50?</b></span>
</div>
</div>
</div>
<div class="container-1">
<p><b>$167</b> still needed for this project</p>
</div>CSS样式（保持不变）:
.container:hover + .container-1 {
display: block;
color: blue;
}
.container-1 {
display: none; /* 默认隐藏 */
margin-bottom: 15px;
padding: 12px 0;
border-radius: 3px;
background-color: rgb(70, 70, 70);
}效果验证: 经过这样的调整后，当鼠标悬停在.container元素上时，.container-1元素会因为满足+选择器的条件而被选中，并应用display: block样式，从而实现预期的显示效果。
注意事项与总结
- DOM顺序至关重要: 使用相邻兄弟选择器时，务必确保目标元素在HTML文档结构中位于参照元素的后面。
- 仅限直接相邻: +选择器只匹配紧随其后的第一个兄弟元素。如果两者之间还有其他兄弟元素，则+选择器将不会匹配。如果需要选择所有后续的兄弟元素，应使用通用兄弟选择器（~）。
- 无“前一个兄弟”选择器: CSS标准中没有直接选择前一个兄弟元素的选择器。如果需要实现类似效果，通常需要调整HTML结构，或者使用JavaScript来操作DOM。
- 可读性与维护性: 在设计HTML结构时，考虑到CSS选择器的限制，有助于提高代码的可读性和可维护性。合理组织DOM结构是前端开发中的一项重要实践。
通过深入理解CSS相邻兄弟选择器的特性及其对HTML结构的要求，开发者可以更有效地利用这一工具实现复杂的布局和交互效果，避免因结构不当导致的样式失效问题。
