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

Question

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

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

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

很遗憾，我无法更改页面的标记。我只能添加CSS规则。

- Don P

---

不，仅通过CSS是不行的：https://dev59.com/S3NA5IYBdhLWcg3wUL9Y - Nico O

<p class="goodChild" /> 是错误的。p 不是自闭合元素，你应该使用 <p class="goodChild"></p>。 - Magicprog.fr

Answer 1

你的代码有误，<p class="badChild"/>是错误的，因为<p>是块级元素，应该像这样结束：<p class="badChild"></p>。我已经更新了问题，针对你的问题，仅使用CSS无法实现此功能，因为CSS只允许选择子元素、第一个子元素和兄弟元素，而不是父元素，所以JavaScript或jQuery是唯一的选择。

如果有方法可以做到这一点，那么它将在当前CSS选择器规范之一中：

• Selectors Level 3 Spec
• CSS 2.1 Selectors Spec

---

Selectors Level 4 Working Draft包括一个与jQuery实现相同的:has()伪类。截至2015年，任何浏览器都没有此功能。

使用:has()，原始问题可以通过以下方式解决：

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

同时，如果您需要选择父元素，您将需要使用JavaScript。

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

- Gaurav Aggarwal

---

建议在纯JS中使用与elem.parentNode相当的jQuery框架是不好的做法。 - Zach Saucier

@ZachSaucier 我同意这种情感，但当79%的网站运行jQuery且没有广泛可用的CSS解决方案时，它为大多数SO的复制/粘贴Web开发人员提供了最简单的实现解决方案。任何能够实现纯JS解决方案的用户也会知道这一点。也许一个纯JS实现比批评最终被接受的答案更可取。 - Andy Gee

Answer 2

不，使用CSS无法从子元素访问父元素。你应该使用JavaScript来实现，例如使用jQuery的.parent()方法。

- IdeaMan