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

为什么说外部样式优先级并不一定低于内部样式?

  •  
  •   jmyz0455 · 2016-08-12 21:03:26 +08:00 · 5896 次点击
    这是一个创建于 2785 天前的主题,其中的信息可能已经有所发展或是发生改变。

    今天看到某博客,原话是:“最近面试了一些求职者,我问 css 优先级计算规则是怎样的?答曰 ID 优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……, ID 选择器的优先级确实>class 选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师,让我们彻底搞清楚 css 优先级计算规则吧!”

    由于该博客不支持我常用的邮箱,没法注册留言,所以就想来问一句:为什么说外部样式优先级并不一定低于内部样式?什么时候外部样式的优先级高于内部样式?

    9 条回复    2016-08-13 14:48:05 +08:00
    htfy96
        1
    htfy96  
       2016-08-12 21:11:12 +08:00 via Android
    !important ? 非前端 猜的
    morewe
        2
    morewe  
       2016-08-12 21:15:23 +08:00
    后端一枚,但是偶尔写一写 CSS ,所以大概知道一点,这里回答一些,若有错误,楼下轻拍。
    简单的说就是权重加成。
    比如外联样式里,一堆选择器叠加,结果是 1+2+3+4+5=15 。
    而内联样式里,选择器的叠加结果是 10+2=12 。
    那外联样式的优先级不就比内联的高了么。
    jmyz0455
        3
    jmyz0455  
    OP
       2016-08-12 21:42:23 +08:00
    @morewe 这个权重我知道,我一开始也这么想的,但是我就想问了
    1 、权重在优先级上比是外部还是内部样式还要高?
    2 、权重相同是不是就内部样式更优先?
    3 、内联(也有人称行间)样式是不是就比 #id (无论外部内部)的优先级还要高?
    那么说根本就没有外部》内部》内联之分,其实就是权重说了算(因为内联其实就等于 ID 选择器)

    @htfy96 而 !important 比以上我问到的优先级都要高,不在讨论范围之内
    crs0910
        4
    crs0910  
       2016-08-12 21:48:46 +08:00   ❤️ 1
    这里说的内联 css 不是指 inline css (你上面说的行间样式),而是指直接在 html 里面用 <style>.a { } #a{ }</style> 这种形式写的 css 。
    一般说的权重就是指:!important > inline css > id > class > tag
    后 3 个都是指定选择器 css ,有一种说法是 inline css 权重是 A , id 的权重是 B , class 权重是 C , tag 权重 D
    比较是从 A -> D 这样去比较, n 个 B(C, D) 加起来永远小于 A(B, C)。
    如果 ABCD 加起来一样大,那么看先后顺序。
    有 important 的话无视 ABCD 。

    说回来你的问题,这里一般造成你说的内联 css 权重大于外联 css 这个误会是因为你写同样 ABCD 权重的两个 css ,一般内联的顺序是在外联之后:
    <link href="a.css">
    <style> p {color: #red}</style>
    如果 a.css 里面也有一个 p{ color: #green} 的话,权重 ABCD 是一样的,都是一个 D ,但是因为内联的在它后面,所以用了 red 。
    假如你这里两个选择器权重不同,那么自然比较权重去了,就不管顺序了。
    另外你的内联 css 如果写在你的外联 css 之前,那权重一样的时候也是外联的优先。
    jmyz0455
        5
    jmyz0455  
    OP
       2016-08-12 22:00:12 +08:00
    @crs0910 非常感谢,完全明白了!
    SoloCompany
        6
    SoloCompany  
       2016-08-13 01:36:04 +08:00
    这某博客描述也是醉了,有些名词翻译出来让人看不懂能不翻译吗,内联样式当然应该是指 inline css 啊,还弄出一个行间样式>内联样式的让人摸不着头脑
    style tag 和 link tag 本来就没有优先关系(都属于外联样式),只有先后顺序关系
    硬是要区分来的话,或者可以叫内置样式表和外置样式表吧 (internal / external stylesheet)
    Phariel
        7
    Phariel  
       2016-08-13 08:35:38 +08:00 via Android
    important > inline > 权重组合
    learnshare
        8
    learnshare  
       2016-08-13 09:11:50 +08:00
    style 属性中的样式,比其他非 !important 的规则都高;
    其他的一般看选择器权重,同样权重看远近( style 先后,外部样式先后)
    franklinyu
        9
    franklinyu  
       2016-08-13 14:48:05 +08:00
    @SoloCompany {{6L}}:我看国外的博客好像表示「 CSS embedded in the html always come after external stylesheets regardless of the order in the html 」,不知道真假?(源: http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2997 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 14:48 · PVG 22:48 · LAX 07:48 · JFK 10:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.