使用 :hover 选择器使用纯 CSS 更改深层子元素的规则答案

【问题标题】：Use the :hover selector to alter the rules of deep children elements with pure CSS使用 :hover 选择器使用纯 CSS 更改深层子元素的规则
【发布时间】：2013-08-13 02:43:14
【问题描述】：

看看这个元素结构。

[#parent]
  [#childA]
    [#childChildA]
    [#childChildB]
      [#childChildChildA]
  [#childB]
[/#parent]

我想把#childChildChildA改成opacity: 0；通过使用 #childA :hover 选择器。我试过了：

#childA:hover > #childChildB > #childChildChildA {
  opacity: 0 !important;
}

但这并没有取得任何成果。使用纯 CSS 的更高层父元素时，如何修改深层子元素？

【问题讨论】：

@DavidThomas，令人惊讶的是，该解决方案奏效了。万分感谢！继续并将其发布为答案。

标签： css hover children

【解决方案1】：

你需要删除>的

<div id='a'>
    <div id='b'></div>
    <div id='c'>
        <div id='d'></div>
    </div>
</div>


#a:hover #c #d {
  opacity: 0 !important;
}

http://jsfiddle.net/qDRwa/

这是一个具有不同 id 名称的示例。

【讨论】：

谢谢。这是一个更有用的答案，所以我会在几分钟内接受这个答案。请注意，在这种情况下，我只需要 #b:hover #d {}
你是对的，这是一个更简化的答案。很高兴我能帮上忙！

【解决方案2】：

我建议以下内容，尽管（显然）未经测试（鉴于缺乏可使用的 HTML）：

#childA:hover #childChildChildA {
    opacity: 0;
}

【讨论】：