一个 CSS 优先级的问题

[Jaufey]

代码是这样的

*,*::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

[llb123]

确定是 A 覆盖 B 吗

[old9]

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.