一个 CSS 优先级的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1084 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码是这样的

*,*::before,*::after{	font-family: "A";}
[class^=icon-], [class*=" icon-"] {  font-family: "B" !important;}
.icon-search::before{ content: ""}

<span class='icon-search'></span>

结果

图标字体没法正常显示，因为全局伪类字体 A 覆盖了图标的 B 字体。

疑问

font-family: B !important 为什么没有起作用, important 应该是优先级最高的呀

我的解答

before 伪元素的 style 是继承了本体元素的 style ，在正常情况下，图标得以显示。但 !important 是应用在了本体元素的 style 上面，并没有保证 before 伪元素会始终保持这个继承关系。

综上

before 继承的优先级 < 全局设置的伪元素 style

2 条回复 • 2021-12-06 11:32:29 +08:00

llb123

2021-11-25 18:14:03 +08:00

确定是 A 覆盖 B 吗

old9

2021-12-06 11:32:29 +08:00 via Android

inherited 优先级低
Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.