html - 悬停时更改属性

Question

我想创建这个圆形的 facebook 按钮，它可以在悬停时交换颜色。但是我无法使用 > 更改子元素，但我什至不确定我是否做对了。这是我的代码

      <div class="alignright" id="facebook-round">
         <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css"         rel="stylesheet" />
         <a class="facebook-round" style="color: rgba(44, 33, 33, 1);" href="https://www.facebook.com/pages/Mio-Natural/613852868659014">
              &nbsp;&nbsp;&nbsp;<i class="fa fa-facebook fa-3x"></i>
         </a>
      </div>

我做的css是这样的

#facebook-round {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: #807D7D;
}

#facebook-round i{
margin-top: 0.22em;
margin-left: 0.12em;
color:rgba(44, 33, 33, 1);
}   

#facebook-round:hover {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: rgba(44, 33, 33, 1);
}   
.facebook-round {
  text-decoration:none;
}
#facebook-round:hover >i {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
color: #807D7D;
}

这是一把 fiddle http://jsfiddle.net/D8ZKf/ 我想知道的另一件事是，是否可以根据子元素定位父元素，这意味着如果我有父元素的特定属性，则仅当子元素存在时才应应用。我可以使用 Javascript 做到这一点，但是否可以使用纯 CSS？我的问题缺乏研究，对此感到抱歉。

Answer 1

将你的CSS更改为

#facebook-round:hover i {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
color: red;
}     

> 

operator 直接子元素。并且选择 parent 是不可能的。更好地使用类来找出