在悬停任何元素时，如何使用CSS3选择器选择所有兄弟元素？

Question

考虑下面给出的HTML。

<ul class="chars_container">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS：

.chars_container{
    list-style-type: none
}

.chars_container li{
    float : left ;
    margin: 20px ;
    font-size : 50px;
    color : #f00;
}

.chars_container li:hover ~ li{
       color : #0f0; 
}

在悬停任何'li'时，我想改变所有兄弟'li'的颜色属性。我正在使用〜选择器，它只选择下一个兄弟姐妹。

请访问此fiddle获取相同的代码。

Answer 1

如果您希望获得类似 Demo

的内容

CSS

.chars_container:hover > li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}

或

.chars_container:hover li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}