深入理解CSS相邻兄弟选择器（+）：工作原理与正确应用

CSS相邻兄弟选择器（+）的工作机制

CSS的相邻兄弟选择器（+）是一个强大而常用的选择器，它允许我们选择紧邻在另一个指定元素之后的兄弟元素。理解其工作机制的关键在于以下几点：

1. 方向性： +选择器是单向的，它只能选择“后一个”兄弟元素，而不能选择“前一个”兄弟元素。例如，A + B表示选择紧邻在A元素之后的B元素。
2. 兄弟关系： 被选择的元素和其参照元素必须是兄弟关系，即它们必须拥有相同的父元素。
3. 紧邻性： 顾名思义，“相邻”意味着被选择的元素必须是参照元素之后第一个出现的兄弟元素。如果它们之间有其他兄弟元素间隔，则+选择器将无法匹配。

常见问题分析：hover交互显示失效

在实际开发中，开发者有时会遇到使用+选择器实现hover效果时，样式不生效的问题。一个典型场景是，用户希望当鼠标悬停在某个元素上时，其“前一个”兄弟元素能够显示出来。

考虑以下原始的HTML和CSS代码：

原始HTML结构：

立即学习“前端免费学习笔记（深入）”；

    
$167 still needed for this project


    

        

    
 
    

        

            
                Only 3 days left to fund this project
            

            
                Join the 42 other donors who have already supported this project. Ever dollar helps.
            
        
        

            
            

            Why give $50?
        
    

原始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）。然而，实际效果是.container-1始终保持display: none，并没有按预期显示。

NexChatGPT

火爆全网的IDEA插件，支持IDEA全家桶

下载

问题根源： 根据前面提到的+选择器的工作机制，container:hover + .container-1尝试选择的是紧邻在.container元素之后的.container-1元素。但在原始的HTML结构中，.container-1元素位于.container元素之前。由于选择器的方向性限制，它无法选择位于其之前的兄弟元素，因此样式规则无法匹配，导致.container-1元素不会在hover时显示。

解决方案：调整HTML元素顺序

解决这个问题的关键在于调整HTML元素的顺序，确保目标元素（.container-1）在触发元素（.container）之后，从而满足+选择器的匹配条件。

修改后的HTML结构：

  

    

  
  

    

      Only 3 days left to fund this project
        

      Join the 42 other donors who have already supported this project. Ever dollar helps.
    
    

      
      

      Why give $50?
    
  


  
$167 still needed for this project

配合的CSS样式（与原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);
}

通过将