css - 用 css 指示一个 "uncle"

Question

这个问题在这里已经有了答案:





Is there a CSS parent selector?

(33 个回答)


6年前关闭。




有没有办法用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 的 sibling 而且，使用 .under:hover 也没有区别。或 .wk_K: hover .并设置 height的 .under成为 1em不允许 rt: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;}

那对你有用。