V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
WhateverYouLike
V2EX  ›  CSS

一个 CSS 优先级的问题

  •  
  •   WhateverYouLike · 59 天前 · 379 次点击
    这是一个创建于 59 天前的主题,其中的信息可能已经有所发展或是发生改变。

    代码是这样的

    *,*::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
        1
    llb123  
       54 天前
    确定是 A 覆盖 B 吗
    old9
        2
    old9  
       44 天前 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.
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4170 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 07:47 · PVG 15:47 · LAX 23:47 · JFK 02:47
    ♥ Do have faith in what you're doing.