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

Question

看看这个元素结构。

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

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

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

但这什么也没做。当使用带有纯 CSS 的更高级别的父元素时，如何修改深层子元素？

score 2 · Accepted Answer

你需要删除>的

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


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

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

score 1 · Accepted Answer

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

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

2 回答 2