CSS选择同级元素

的孩子，如果我有这样的：CSS选择同级元素

<div class="parent"> 
    <a href="#" id="trigger">Trigger</a> 
</div> 
<div class="sibling"> 
    <div id="change">Hello</div> 
</div>

是否有一个选择的时候#trigger是在徘徊抢#change？

像悬停#trigger一样，更改.sibling的#change元素的背景。

我正在寻找一个纯粹的CSS解决方案，无javascript。

2013-07-22 michaellee

总之：没有。

鉴于您的HTML的当前结构（以及CSS选择器的当前状态），这是不可能的。也许我们会在CSS4中得到类似的东西，但像这样遍历最好留给Javascript。

可以很明显的重组您的标记，并使用兄弟选择：

HTML

<div class="parent"> 
    <a href="#" id="trigger">Trigger</a> 
    <div class="sibling"> 
     <div id="change">Hello</div> 
    </div> 
</div>

CSS

#trigger:hover + .sibling #change { 
    color:red; 
}

2013-07-22 17:16:22

很感谢尼克为你的答案和你的例子，我如何可以重组我的标记，使其工作。 – michaellee

不可以。您不能仅使用CSS来实现此目的。 JavaScript是在这种情况下，一个很好的选择..

但是，您可以检测.parent正在徘徊（如果父包围正好触发，这将解决您的问题）：

.parent:hover + .sibling div#change{background:red;}

（标记保持不变jsFiddle ）

2013-07-22 17:14:15

回答