父元素的子元素的 CSS 选择器答案

【问题标题】：CSS Selector for Child of Parent's Sibling Element父元素的子元素的 CSS 选择器
【发布时间】：2019-03-16 06:10:31
【问题描述】：

如果我有这个：

<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 解决方案。

【问题讨论】：

【解决方案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; 
}

【讨论】：

【解决方案2】：

没有。仅使用 CSS 无法实现这一点。在这种情况下，Javascript 是一个不错的选择。

但是，您可以检测到 .parent 被悬停（如果父级恰好围绕触发器，这将解决您的问题）：

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

（标记保持不变jsFiddle）

【讨论】：