如果孩子不为空，则将样式应用于父项

Question

如果子元素不为空，是否可以将样式应用于父元素？ 我需要从空容器中移除边框。

.parent {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
}

<div class="parent">
  <div class="child">
    not empty
  </div>
</div>

<div class="parent">
  <div class="child">
  </div>
</div>

我尝试过：

.parent:not(> .child:empty)

但是更高兴的是，它将在.parent中寻找.child类。有没有办法用CSS做到这一点？

Answer 1

标题似乎有点误导，但如果要将CSS样式应用于不包含任何内容的div，则可能会遇到一些问题，可行的方法是在子div内定义标签并设置其颜色匹配您的背景。

<label style="color= "white"> a </label>

这将提供预期的外观

Answer 2

经过一些研究，似乎最好的选择是伪类选择器:has()。

不幸的是，它是实验性的（仍然是draft），只能与document.querySelector()之类的函数一起使用，不能直接在样式表上使用。

研究信息和学分：

• Stackoverflow：Is there a CSS parent selector?
• Can I use...

Answer 3

您可能想从相反的思路来解决这个问题。而不是IF，它不是空的。对元素进行样式设置，然后将样式不同的样式设置为空。

.child {
   border:1px solid #000;
}
.parent .child:empty {
   border:none;
}

JS小提琴供参考：https://jsfiddle.net/Le93svqb/

这将允许您在所有.child元素上设置默认样式，并以另一种方式为空元素设置样式。

Answer 4

我认为，如果您使用一些JavaScript，它将对您来说更容易