.example { color: red; } p:empty { color: blue; }
在上面的例子中,大家设置了一个CSS类样式example,该样式设置了文字颜色为红色。然后,大家使用幽灵选择器:empty,如果一个段落没有文本内容,就将其文字颜色设置为蓝色。
有内容的段落
在这个例子中,大家使用了.wrapper元素包含了三个元素:两个段落和一个span。第一个段落没有任何文本,使用了:empty幽灵选择器,将被设置为蓝色。第二个段落有文本内容,不符合:empty幽灵选择器条件,不变化。最后的span元素并没有应用任何样式。
CSS幽灵选择器提供了一种灵活的方式来应用样式,甚至在元素没有出现在HTML文档中时。它鼓励开发者更好地组织代码和思考前端开发的不同场景下应用样式的方式。