CSS 伪 class 用于没有文本的元素

Question

对于没有文本节点的元素，是否有一个 CSS 伪 class，如下所示：

div:nocontent {
    display: none;
}

我知道有 :empty 伪 class 但我想要的东西应该忽略标签...

例如：

<div>
    <p></p>
</div>

有什么解决办法吗？

编辑：

为了澄清，它可能是这样的语法：

<div class="checker">
    <div class="somemarkupcontainerthatcomesfromthesystemandcantberemoved"></div>
</div>

然后像这样隐藏整个东西（这将是最佳选择）：

.checker:nocontent {
    display: none;
}

Answer 1

是的，empty 检查节点是否为空（因此没有文本也没有子节点）。

没有 CSS-only 选项适合您的目的。

Answer 2

如果你想定位你的 div，你需要一个 parent 选择器，它（还）不存在，所以要解决这个问题需要一个脚本。

正如 Hitmands, check this post 对脚本示例的建议。

关于脚本，还有服务器端方法，其中替换脚本可以在将结果发送到客户端之前解析出空标签。

如果你想定位你的 p，如果你的 p 是空的并且是 div 的 child，你可以这样做。

div {
  border: 2px solid red;
  min-height: 20px;
}
p {
  border: 2px solid blue;
  height: 20px;
}
div:not(:empty) p:empty {
  display: none;
}

<div>
    <p></p>
</div>
<br />
<div>
    <p>Hey</p>
</div>

CSS pseudo class for elements with no text