我正在使用:before
标记用户个人资料的链接,并使用符号来表征用户,例如“管理员”,“非活动用户”,“新手”等。
问题是,可以申请多个。
如果链接上的多个类使用:before
定义content
伪元素,会发生什么?最具体的选择器是否覆盖第一个?或者他们都按顺序出现?无论发生什么,它都是可靠的行为吗?
答案 0 :(得分:4)
最具体的选择器优先。这在CSS2.1中提到:
伪元素的行为与CSS中的真实元素一样,下面描述的例外情况和elsewhere.
就实际的浏览器行为而言,据我所知,在:before
等非替换元素上支持:after
和a
的所有浏览器上,此行为都是可靠的。 CSS2.1确实定义了那些伪元素的行为,与img
等替换元素不同。这是有道理的,因为如果要生成多个这样的伪元素,浏览器就不会知道它应该如何在格式化结构中进行布局。
在以下示例中,通过特异性和级联,a.inactive:before
将优先,此链接的:before
伪元素将具有匹配的内容(因为两个选择器具有相同的特定性 - 具有类型选择器,类选择器和伪元素):
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>
如果一个元素可以匹配多个具有相同伪元素的选择器,并且您希望以某种方式应用所有这些选择器,则需要使用组合选择器创建其他CSS规则,以便您可以准确指定浏览器应该在那些情况下。扩展上面的例子:
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}
a.administrator.inactive:before {
content: '[Administrator] [Inactive User] ';
}
<a class="administrator inactive" href="profile.php?userid=123">Username</a>