纯CSS选择器控制子元素或兄弟元素的hover效果

一般 hover 效果只用在自身元素和控制子元素，那么可以直接用 CSS 控制兄弟元素的 hover 效果吗？

答案是可以的，不过只能控制相邻的元素，具体示例代码如下：

1、如果 #b 元素是 #a 元素的子元素，可以直接通过 #a:hover #b {...} 这种方式来控制。

示例代码如下：

<style>      #a:hover #b{          color:green;      }  </style>

2、#b 与 #c 是亲兄弟关系，有相同的父节点，且 #b 跟 #c 相邻，可以通过 #b:hover + #c{...} 来控制 #c 的样式。

当鼠标移到 #b 时，#c 的样式就会改变。

示例代码如下：

<style>      #b:hover + #c{color : red;}  </style>

HTML元素：

<div id='a'>元素1      <div id='b'>元素2</div>      <div id='c'>元素3</div>  </div>