父容器外的CSS选择器

时间:2013-11-24 19:09:31

标签: html css css-selectors

当一个带有ID的元素在mousehover上时,我想将一些CSS应用于另一个类中的元素。我不想使用JS。

示例:

<div class="parent">
    <div id="parent_1">parent_1</div>
    <div id="parent_2">parent_2</div>
    <div id="parent_3">parent_3</div>
</div>

<div class="another_parent">
    <div id="another_parent_1">another_parent_1</div>
    <div id="another_parent_2">another_parent_2</div>
    <div id="another_parent_3">another_parent_3</div>
</div>

<style>#parent_3:hover #another_parent_3 {color: red;}</style>

JSFiddle:http://jsfiddle.net/CvT6U/

2 个答案:

答案 0 :(得分:4)

这是不可能的。根据CSS3规范:

http://www.w3.org/TR/css3-selectors/#selectors

E F an F element descendant of an E element 
E > F   an F element child of an E element  
E + F   an F element immediately preceded by an E element
E ~ F   an F element preceded by an E element

答案 1 :(得分:-1)

你能不能使用一般的兄弟选择器吗?

#parent_3:悬停〜#another_parent_3 {color:red;}

http://learn.shayhowe.com/advanced-html-css/complex-selectors/#sibling-selectors