Question

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

<ruby>
  <span class="under">
    <span class="wk_K">決</span>
  </span>
  <rt>き</rt>
</ruby>
<ruby>
  <span class="under">決</span>
  <rt>き</rt>
</ruby>

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

有时<span class="under">不在那里，然后相邻的兄弟选择器工作正常：

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

当wk_K字段嵌套在<span class="under">中时，如果我想选择'邻近的叔叔'，我怎样才能达到同样的效果？

Answer 1

您必须在此处使用under课程：

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

因为，rt是.under的兄弟，而且使用.under:hover或.wk_K: hover也没有区别。并将height的{{1}}设置为.under，不允许1em触发rt:hover。

如果它不起作用，请告诉我。

在您的情况下，您尝试使用CSS 3中不支持的父选择器以及CSS 4.因此JavaScript或jQuery是您的解决方案。我们了解您需要选择.under:hover只有.under。

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

.wk_K

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

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

这对你有用。

用css

1 个答案: