兄弟元素子的CSS选择器

Question

如果我有这个:

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

当#trigger徘徊时,是否有一个选择器来抓取#change？

就像在#trigger上悬停一样,更改.sibling的#change元素的背景.

我正在寻找一个没有javascript的纯CSS解决方案.

Answer 1

总之一句:不.

鉴于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; 
}

codepen