css - :hover セレクターを使用して、純粋な CSS で深い子要素のルールを変更します

Question

この要素構造を見てください。

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

に変更#childChildChildAしたいopacity: 0; #childA :hover セレクターを使用します。私は試した：

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

しかし、これは何も達成しませんでした。純粋な CSS で上位の親要素を使用している場合、深い子要素を変更するにはどうすればよいですか?