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

回答