通过多个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 preview

顺便说一下，如果你有共同的样式，你可以通过在另一个规则中隔离它们来保持你的代码DRY。例如，您可以选择每个类并为它们提供color: red：

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

jsFiddle preview