没有文本的元素的 CSS 伪类

Question

是否有像这样没有文本节点的元素的 CSS 伪类:

div:nocontent {
    display: none;
}

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

例如:

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

有什么解决办法吗？

编辑:

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

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

然后像这样隐藏整个东西(这将是最佳选择):

.checker:nocontent {
    display: none;
}

Answer 1

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

根据 Hitmands 的建议, check this post获取脚本示例。

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

如果你想定位你的 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>