使用：hover选择器可以使用纯CSS更改深子元素的规则

Question

看看这个元素结构。

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

我想将#childChildChildA更改为opacity: 0;使用#childA：hover选择器。我试过了：

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

但这没有成就。当使用更高版本的父元素和纯CSS时，如何修改深子元素？

Answer 1

您需要删除＆gt;的

<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名称的示例。

Answer 2

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

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