css - 在 'empty' div 中添加 css 内容文本

Question

请参阅此 fiddle :http://jsfiddle.net/xanld/3yh28/

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

我只想向空的 div 添加 css 内容。我可以使用 :empty 选择器，但我需要使用 :before 选择器来添加内容。是否可以同时使用两者？

谢谢。

Answer 1

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

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

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

顺便说一下，:empty is CSS3并且不支持旧浏览器(如IE8，或大约40%的浏览器市场份额)