我使用:before
符号来标记指向用户配置文件的链接来表征用户,示例包括“管理员”、“非活动用户”、“新手”等。
问题是,有可能不止一个人申请。
那么如果链接上的多个类用 定义了一个:before
伪元素会发生content
什么?最具体的选择器会覆盖第一个吗?还是它们都按顺序出现?不管发生什么,这是可靠的行为吗?
我使用:before
符号来标记指向用户配置文件的链接来表征用户,示例包括“管理员”、“非活动用户”、“新手”等。
问题是,有可能不止一个人申请。
那么如果链接上的多个类用 定义了一个:before
伪元素会发生content
什么?最具体的选择器会覆盖第一个吗?还是它们都按顺序出现?不管发生什么,这是可靠的行为吗?
最具体的选择器优先。这在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>