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

Question

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

div:before {
    content: 'This div is empty';
}
div:empty {
    background:red;
}

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

谢谢。

Answer 1

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

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

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

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