在“空”div中添加css内容文本

Posted 2023-03-05

【中文标题】在“空”div中添加css内容文本

【英文标题】：add css content text in 'empty' divs

【发布时间】：2013-11-22 20:14:31

【问题描述】：

看到这个小提琴：http://jsfiddle.net/xanld/3yh28/

div:before 
    content: 'This div is empty';

div:empty 
    background:red;

我只想将 css 内容添加到空 div 中。我可以使用 :empty 选择器，但我需要使用 :before 选择器来添加内容。可以同时使用吗？

谢谢。

【参考方案1】：

是的，您可以同时使用两者 - 请参阅更新的小提琴：http://jsfiddle.net/3yh28/1/

div:empty:before 
   content: 'This div is empty';

确保它是:empty:before（不是:before:empty），因为您想在匹配div:empty的元素上应用伪元素:before。

顺便说一句，:empty is CSS3 并且不支持旧浏览器（例如 IE8，或者大约 40% 的浏览器市场份额）

【讨论】：

该死的。这很简单，我以为我已经尝试过了。事实上，我认为我尝试过的是 div:before:empty 而不是 div:empty:before，然后只是假设这种语法无效。谢谢:)

这是令人困惑。更新了对订单发出警告的答案。