今天看到某博客，原话是：“最近面试了一些求职者，我问 css 优先级计算规则是怎样的？答曰 ID 优先级>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，然后就没有然后了……， ID 选择器的优先级确实>class 选择器的优先级>元素选择器的优先级，但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师，让我们彻底搞清楚 css 优先级计算规则吧！”
由于该博客不支持我常用的邮箱，没法注册留言，所以就想来问一句：为什么说外部样式优先级并不一定低于内部样式？什么时候外部样式的优先级高于内部样式？
 | 1 htfy96 Aug 12, 2016 via Android !important ？ 非前端 猜的 |
 | 2 morewe Aug 12, 2016 后端一枚，但是偶尔写一写 CSS ，所以大概知道一点，这里回答一些，若有错误，楼下轻拍。 简单的说就是权重加成。 比如外联样式里，一堆选择器叠加，结果是 1+2+3+4+5=15 。 而内联样式里，选择器的叠加结果是 10+2=12 。 那外联样式的优先级不就比内联的高了么。 |
 | 3 jmyz0455 OP |
 | 4 catoncat Aug 12, 2016  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 之前，那权重一样的时候也是外联的优先。 |
 | 6 SoloCompany Aug 13, 2016 这某博客描述也是醉了，有些名词翻译出来让人看不懂能不翻译吗，内联样式当然应该是指 inline css 啊，还弄出一个行间样式>内联样式的让人摸不着头脑 style tag 和 link tag 本来就没有优先关系（都属于外联样式），只有先后顺序关系 硬是要区分来的话，或者可以叫内置样式表和外置样式表吧 (internal / external stylesheet) |
 | 7 Phariel Aug 13, 2016 via Android important > inline > 权重组合 |
 | 8 learnshare Aug 13, 2016 style 属性中的样式，比其他非 !important 的规则都高； 其他的一般看选择器权重，同样权重看远近（ style 先后，外部样式先后） |
 | 9 franklinyu Aug 13, 2016 @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/ ） |
Select Language