Question

我正在使用:before标记用户个人资料的链接，并使用符号来表征用户，例如“管理员”，“非活动用户”，“新手”等。

问题是，可以申请多个。

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

Answer 1

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

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

1 个答案: