在“空”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 ），因为您要在匹配{{1}的元素上应用伪元素:before }。

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