仅使用 CSS 的内容有 1 个字符时如何隐藏 div？ [复制]

Posted 2023-03-06

【中文标题】仅使用 CSS 的内容有 1 个字符时如何隐藏 div？ [复制]

【英文标题】：How to hide div when its contents has 1 character using CSS only? [duplicate]

【发布时间】：2014-11-13 05:10:24

【问题描述】：

我有兴趣在不是“ ”（空白区域）时显示一段文本，否则将其隐藏。 我只想使用 CSS。 代码是：

<div>Some text here</div>
<div>&nbsp;</div>
<div>Another text here</div>

删除 "&nbsp ;" 不是变体。 （如果你想建议我使用 :empty）

请注意 div 是全局的，也可能是随机放置的，这就是为什么我正在寻找隐藏只有 1 个字符的 div 的答案。 （或它的任何其他变体）。

为了清楚起见，我无法更改 html，它正在从数据库中加载数据，因此我需要使用 CSS 文件来隐藏 div 内容/标签。如果它以某种方式有所帮助，那么文本不是动态的而是静态的，它只会在从数据库加载文本时更改一次。

提前致谢！

【问题讨论】：

我认为仅靠 CSS 是不可能的。但我投了赞成票，因为我很想看到一个纯 CSS 的解决方案。我可以想到一个非常简单的 javascript，但这显然不是您要的。

我 99.9% 确信仅使用 CSS 是不可能的。

目前不可能，恐怕；您需要更改服务器的输出/响应或使用 JavaScript。

要隐藏的div是否总是包含 ？

@wumm: "文本不是动态的，而是静态的，它只在从数据库加载文本时改变一次。"

【参考方案1】：

仅使用 CSS 是不可能的。 CSS 选择器根据特定元素的属性（id、class 等）或节点结构条件（例如子索引位置）匹配 HTML 元素，但没有基于内容的选择器。

您可以设置元素文本内容的特定部分（首字母等）的样式，但永远不要使用内容来定位它的父级。

关于 CSS SELECTORS 的 W3 文档将以下内容指定为可能元素的规则选择器：

通用选择器 类型选择器 后代选择器 子选择器 相邻兄弟选择器 属性选择器 ID 选择器 伪元素和伪类 伪类 伪元素

抱歉，还没有“内容”选择器！

正如 wumm 在下面评论的那样，有一些提案，但没有一个被实施。 JQuery 已经实现了一些与之接近的“伪”，例如 :has 或 :contains，但即使是这些也无法满足您的需求。

【讨论】：

有一个内容选择器的提议，但它被从规范中删除了。见第三个答案：***.com/questions/1520429/css-3-content-selector

任何大小的“内容”选择器？不检查内容本身，而只是检查它有多大，它的长度。就像使用短 cmets 并将它们着色为绿色，而使用长 cmets 将其变为红色，无论它们的内容如何。它也会回答我的问题，谢谢！