参见英文答案 > Can I have multiple :before pseudo-elements for the same element? 2个
我正在使用：在使用符号标记用户配置文件的链接以表征用户之前,示例包括“管理员”,“非活动用户”,“新手”等.
问题是,可以申请不止一个.
那么,如果链接上的多个类定义了一个：带有内容的伪元素之前会发生什么？最具体的选择器是否覆盖第一个？或者他们都按顺序出现？无论发生什么,它都是可靠的行为吗？
最佳答案
最具体的选择器优先.这在CSS2.1中提到：
原文链接：https://www.f2er.com/css/427132.htmlPseudo-elements behave just like real elements in CSS with the exceptions described below and 07001
就实际的浏览器行为而言,据我所知,这种行为在所有支持的浏览器上都是可靠的：在非替换元素之前和之后,如a,CSS2.1确实为这些伪元素定义了行为,不像取代像img这样的元素.这是有道理的,因为如果要生成多个这样的伪元素,浏览器就不会知道它应该如何在格式化结构中进行布局.
在下面的示例中,通过特异性和级联,a.inactive：before将优先,并且此前链接的：before伪元素将具有匹配的内容(因为两个选择器同样具体 – 具有类型选择器,类选择器和一个伪元素)：
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}PHP?userid=123">Username如果一个元素可以匹配多个具有相同伪元素的选择器,并且您希望以某种方式应用所有这些选择器,则需要使用组合选择器创建其他CSS规则,以便您可以准确指定浏览器应该执行的操作案例.扩展上面的例子：
a.administrator:before {
content: '[Administrator] ';
}
a.inactive:before {
content: '[Inactive User] ';
}
a.administrator.inactive:before {
content: '[Administrator] [Inactive User] ';
}PHP?userid=123">Username