用css表示“叔叔”

Question

有没有办法用CSS选择元素的叔叔？具体来说，我正在为具有以下形式条目的页面编写一个 GreaseMonkey 脚本：

\n\n

<ruby>\n  <span class="under">\n    <span class="wk_K">\xe6\xb1\xba</span>\n  </span>\n  <rt>\xe3\x81\x8d</rt>\n</ruby>\n<ruby>\n  <span class="under">\xe6\xb1\xba</span>\n  <rt>\xe3\x81\x8d</rt>\n</ruby>\n

\n\n

我想隐藏rt出现在字段旁边的每个字段wk_K（除非我将鼠标悬停在后者上），即上面rt示例中的第一个字段应该隐藏，但第二个字段不应该隐藏。

\n\n

有时<span class="under">不存在，然后相邻的同级选择器就可以正常工作：

\n\n

ruby .wk_K + rt {visibility:hidden;}\nruby .wk_K:hover + rt {visibility:visible;}\n

\n\n

wk_K当字段嵌套在 a 中时<span class="under">，即如果我想选择“相邻叔叔”，如何才能达到相同的效果？

\n

Answer 1

您必须under在这里使用该类：

ruby .under + rt {visibility: hidden;}
ruby .under:hover + rt {visibility: visible;}

因为，rt是 和 的同级，而且使用或.under没有区别。并将 的 设置为不允许，这会触发..under:hover.wk_K: hoverheight.under1emrt:hover.under:hover

如果不起作用请告诉我。

在您的情况下，您尝试使用父选择器，CSS 3 和 CSS 4 都不支持该选择器。因此 JavaScript 或 jQuery 是您的解决方案。我知道您需要选择.under仅包含.wk_K其中的内容。

如果有兴趣，您可能需要以下 jQuery 代码。

$(".wk_K").closest(".under").addClass("rt-hover");

在CSS中，如果你可以使用这个：

ruby .rt-hover + rt {visibility: hidden;}
ruby .rt-hover:hover + rt {visibility: visible;}

那对你有用。