这个问题在这里已经有了答案:
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">
中,即如果我想选择“相邻的叔叔”?
最佳答案
您必须使用 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;}
那对你有用。
关于css - 用 css 指示一个 "uncle",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32813001/