在'empty' 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），因为您要在与div:empty匹配的元素上应用伪元素:before。

顺便说一下，:empty是CSS3，在旧浏览器上不受支持（例如IE8，约占浏览器市场份额的40%）