如果同一元素的多个类定义了一个 :before 伪元素会怎样？ [复制]答案

【问题标题】：What happens if multiple classes of the same element define a :before pseudo-element? [duplicate]如果同一元素的多个类定义了一个 :before 伪元素会怎样？ [复制]
【发布时间】：2012-12-16 05:05:38
【问题描述】：

我正在使用:before 来标记指向用户配置文件的链接，并用一个符号来表征用户，例如“管理员”、“非活动用户”、“新手”等。

问题是，有可能不止一个人申请。

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

【问题讨论】：

根据经验，最具体的会覆盖 less 的具体；但我手头没有可以确认为正确行为的规范；但我猜这似乎与 CSS 的一般特殊性规则有关。
原来这个问题与我几个月前回答的另一个问题重复。我不记得的借口？ It was originally a one-liner (two-sentencer?).我已经将这个答案中的大部分信息合并到之前的那个中。

标签： css css-selectors pseudo-element

【解决方案1】：

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

除了下面描述的例外和elsewhere.
，伪元素的行为就像 CSS 中的真实元素一样

就实际浏览器行为而言，据我所知，这种行为在所有支持:before 和:after 对不可替换元素（如a）的浏览器上都是可靠的，CSS2.1 确实定义了行为对于那些伪元素，不像 img 这样的替换元素。这是有道理的，因为如果要生成多个这样的伪元素，浏览器将不知道应该如何在格式化结构中布置它们。

在下面的示例中，根据特异性和级联，a.inactive:before 将优先，并且此链接的 :before 伪元素将具有匹配的内容（因为两个选择器同样具体 - 具有类型选择器、类选择器和一个伪元素）：

a.administrator:before {
    content: '[Administrator] ';
}

a.inactive:before {
    content: '[Inactive User] ';
}

&lt;a class="administrator inactive" href="profile.php?userid=123"&gt;Username&lt;/a&gt;

如果一个元素可以匹配多个具有相同伪元素的选择器，并且您希望所有这些都以某种方式应用，则需要使用组合选择器创建额外的 CSS 规则，以便您可以准确地指定浏览器应该在那些情况下做。扩展上面的例子：

a.administrator:before {
    content: '[Administrator] ';
}

a.inactive:before {
    content: '[Inactive User] ';
}

a.administrator.inactive:before {
    content: '[Administrator] [Inactive User] ';
}

&lt;a class="administrator inactive" href="profile.php?userid=123"&gt;Username&lt;/a&gt;

【讨论】：

谢谢。我通过使大多数组合互斥并为其余组合创建组合规则来解决我的问题。