CSS3：空选择器和内容属性

Posted 2023-03-06

【中文标题】CSS3：空选择器和内容属性

【英文标题】：CSS3 :empty selector and content property

【发布时间】：2012-12-15 15:47:34

【问题描述】：

我想要一起使用 CSS3 的 :empty psedo-selector 和 CSS3 的 content 属性来向空列表添加一些文本，如下面的小提琴所示：

http://jsfiddle.net/ZesAC/2/

我了解到 CSS 只允许在 :after 或 :before 选择器中使用 content。是否有允许设置空列表样式的解决方案？

编辑

正如我在 cmets 中了解到的，您可以在 CSS3 中的任何位置使用content（在大多数浏览器中无效 [截至 2012 年 12 月 31 日]）并且仅在CSS2 中的 :after 和 :before 块。 （感谢@BoltClock）

如果您不介意特定于 Firefox，您可以使用 -moz-only-whitespace 选择器使其行为更符合逻辑。 （感谢@robertc）

【问题讨论】：

CSS3 的content 属性在任何地方都可以使用，但几乎不存在实现。 CSS2 的content 属性只允许在:after 和:before 中使用。

@BoltClock 啊，我被我读到的东西误导了。感谢您的提醒。

【参考方案1】：

原来我在提问中回答了我自己的问题：

http://jsfiddle.net/M6xZj/2/

您可以使用 :after 和 :empty 元素在 UL 之后添加一些内容。毕竟，它是空的，所以它保证位于列表所在的位置。

【讨论】：

Be careful with :empty，另见:-moz-only-whitespace（很遗憾不是标准）。

谢谢@robertc。我知道 :empty 有一些模糊/非常愚蠢的行为。不过感谢警告！现在不知道only-whitespace！ :) 这很酷。

同意。值得注意的是，:empty 不会匹配 <div> </div> 之类的东西（注意空格，但会匹配 <div></div>（没有空格）。

【参考方案2】：

.some_class_name:empty::after content: "-";