无文本元素的 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 的建议，查看此帖子 以获取脚本示例。

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

如果你想定位你的

p

，如果是空的并且是你的

div

的孩子，你可以这样做。

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>

Answer 2

是的，

empty

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

没有适合您目的的纯 CSS 选项。

Answer 3

如果空的div 有一个行间距，它就不起作用。 即：