如果同一元素的多个类定义了:before伪元素,会发生什么？

Question

我正在使用:before符号来标记用户个人资料的链接以表征用户,例如"管理员","非活动用户","新手"等.

问题是,可以申请不止一个.

那么,如果链接上的多个类定义了一个:before伪元素,会发生content什么？最具体的选择器是否覆盖第一个？或者他们都按顺序出现？无论发生什么,它都是可靠的行为吗？

Answer 1

最具体的选择器优先。这在CSS2.1 中提到：

伪元素的行为就像 CSS 中的真实元素，除了下面和其他地方描述的例外。

就实际浏览器行为而言，据我所知，这种行为在所有支持的浏览器: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>