代码是这样的

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

大佬有話說 (0)