前言
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>
1、对当前元素改变
#a:hover {
color : #FFFF00;}
2、当存在多个子元素时，只对其中一个进行改变 .
#a:hover > #b:first-child{
color : #FF0000;}
3、当存在多个子元素时，对所有的进行改变
#a:hover > #b{
color : #FF00FF;}
4、当对非直系元素处理时
#a:hover + #c{
color : #00FF00;}
注意：当对非直系元素进行处理时，只能处理向下的非直系元素，向上的非直系元素是不受控制的
5、当对非直系元素的子元素处理时
#a:hover + #c > #b{
color : #0000FF;}
注意：当对非直系元素进行处理时，只能处理向下的非直系元素，向上的非直系元素是不受控制的