CSS相邻兄弟选择器+的工作原理
css中的相邻兄弟选择器（adjacent sibling selector），由加号+表示，用于选择紧邻在指定元素之后的同级元素。其核心规则可以概括为两点：
- 同级关系：被选择的元素和选择器左侧的元素必须拥有相同的父元素，即它们是兄弟元素。
- 紧邻之后：被选择的元素必须是紧挨着选择器左侧元素之后出现的第一个兄弟元素。如果它们之间隔着其他元素，或者被选择的元素出现在指定元素之前，+选择器将不会生效。
例如，div + p会选择所有紧跟在div元素之后的p元素。
常见误区：为什么+选择器有时不生效？
在实际开发中，开发者有时会遇到+选择器未能按预期工作的情况。这通常是因为对+选择器的“紧邻之后”这一特性理解不足。考虑以下示例，目标是当鼠标悬停在.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);
}在这种情况下，尽管.container和.container-1是同级元素，但.container-1在HTML结构中位于.container之前。根据+选择器的定义，它只能选择紧邻在指定元素之后的兄弟元素。因此，.container:hover + .container-1这个规则不会匹配到任何元素，导致.container-1始终保持display: none。
解决方案：调整HTML结构以正确应用+选择器
要使+选择器生效，最直接有效的方法是调整HTML元素的顺序，确保目标元素紧邻在触发元素之后。将.container-1元素移动到.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-1现在成为了.container的紧邻兄弟元素，且位于其之后。当鼠标悬停在.container上时，display: block样式将成功应用到.container-1上，使其显示出来。
注意事项与总结
- 理解“紧邻之后”：这是+选择器的核心，务必牢记它只作用于直接跟在目标元素后面的兄弟元素。
- HTML结构至关重要：CSS选择器的效果很大程度上依赖于HTML文档的结构。在设计交互和样式时，应充分考虑元素的层级和顺序。
- 替代方案：如果业务需求不允许调整HTML结构（例如，需要选择之前的兄弟元素，或者非紧邻的兄弟元素），则可能需要借助其他CSS选择器（如通用兄弟选择器~，它选择所有在指定元素之后且具有相同父元素的兄弟元素，但仍然不能选择之前的元素），或者使用JavaScript来动态修改样式。例如，要选择所有在.container之后的.container-1，可以使用.container:hover ~ .container-1。然而，要选择之前的兄弟元素，纯CSS无法实现，必须依赖JavaScript。
掌握+选择器的工作机制，并合理规划HTML结构，是编写高效、可维护CSS代码的关键。
