6

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

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

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

4

1 回答 1

5

最具体的选择器优先。这在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>

于 2013-01-01T16:03:49.280 回答