给出以下
HTML：
<div class="required">required only</div> <div class="note">note only</div> <div class="required note">required and note</div> <div class="note required">note and required</div>
和CSS：
.required:after { content: " *"; color: red; } .note:after { content: " +"; color: red; }
Firefox 11的结果是：
required only * note only + required and note + note and required +
在提供多个类的情况下(.required和.note)我想要在元素中添加“*”和“”,以便：
required and note *+ note and required +*
是否可以使用纯CSS,如果是这样,怎么样？
编辑：这里有一个链接到这个例子的jsfiddle：http://jsfiddle.net/xpZST/
解决方法
您需要额外的规则才能使其工作.
鉴于类的顺序很重要(通常不应该！),您需要使用属性选择器而不是类选择器,您需要创建两个规则：
[class="required note"]:after { content: " *+"; color: red; } [class="note required"]:after { content: " +*"; color: red; }
简单地添加这些规则之后,你有它应该工作,因为属性和类选择器是同样具体的.
顺便说一下,如果您有通用的样式,可以通过将代码隔离在另一个规则中来保留代码.例如,您可以选择每个类,并给它们两个颜色：红色：
.required:after,.note:after { color: red; }