css hover控制其他元素 

<html>
<body>
<style>
    #a:hover {color : #FFFF00;}
    #a:hover > #b:first-child{color : #FF0000;}    
    #a:hover > #b{color : #FF00FF;}  
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

 + 是相邻兄弟选择器,只能选择紧邻下一个相邻的元素

~ 是普通兄弟选择器,只能选择目标之后的兄弟元素,不能选择之前的

posted @ 2016-08-22 15:29  西瓜霜  阅读(22641)  评论(2)    收藏  举报