css - 通过多个 CSS 附加内容 :after 类

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 预览

顺便说一句，如果你有共同的风格，你可以通过在另一个规则中隔离它们来保持你的代码干燥。例如，您可以选择每个类并同时给它们color: red：

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

jsFiddle 预览