给出以下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/
答案 0 :(得分:9)
您需要有其他规则才能发挥作用。
鉴于类的排序很重要(通常情况下它不应该!),您需要使用属性选择器而不是类选择器,并且您需要创建两个规则:
[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }
只需在您拥有的规则之后添加这些规则,它就应该起作用,因为属性和类选择器具有同等的特定性。
顺便说一下,如果你有共同的样式,你可以通过在另一个规则中隔离它们来保持你的代码DRY。例如,您可以选择每个类并为它们提供color: red
:
.required:after, .note:after { color: red; }