通过多个CSS附加内容:课后

Question

给出以下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/

Answer 1

您需要其他规则才能实现此目的.

鉴于类的排序很重要(通常情况下它不应该!),您需要使用属性选择器而不是类选择器,并且您需要创建两个规则:

[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }

只需在您拥有的规则之后添加这些规则,它就可以工作,因为属性和类选择器具有同等的特性.

jsFiddle预览

顺便说一句,如果你有共同的样式,你可以通过在另一个规则中隔离它们来保持你的代码DRY.例如,您可以选择每个类并同时给它们color: red:

.required:after, .note:after { color: red; }

jsFiddle预览