使用 CSS 隐藏所选元素的父元素

Question

仅使用CSS，如果子元素没有类，是否可以隐藏父元素？

<!-- hide this -->
<div class="parent">
  <p class="badChild" />
</div>

<!-- do not hide this -->
<div class="parent">
  <p class="goodChild" />
</div>

不幸的是，我无法更改页面的标记。我只能添加 CSS 规则。

Answer 1

好吧，你的代码是<p class="badChild"/>错误的，因为<p>它是一个块元素，并且像这样结束， <p class="badChild"></p>我已经更新了问题，并且遇到你的​​问题，没有方法可以仅使用 css 来执行此操作，因为 css 允许你选择子元素、第一个子元素、兄弟元素，但不能父元素，因此 javascript 或 jquery 是唯一的选择。

如果有办法做到这一点，它可以在当前的 CSS 选择器规范中：

• 选择器 3 级规格
• CSS 2.1 选择器规范

选择器级别 4 工作草案包括一个与jQuery 实现:has()相同工作的伪类。截至 2015 年，该功能在任何浏览器中均不可用。

使用:has()原来的问题可以这样解决：

li:has(> a.active) { /* styles to apply to the li tag */ }

同时，如果您需要选择父元素，则必须求助于 JavaScript。

$(document).ready(function(){
    $('.badChild').parent('.parent').hide();
});