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

[jmyz0455]

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

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

[htfy96]

!important ？ 非前端 猜的

[morewe]

后端一枚，但是偶尔写一写 CSS ，所以大概知道一点，这里回答一些，若有错误，楼下轻拍。
简单的说就是权重加成。
比如外联样式里，一堆选择器叠加，结果是 1+2+3+4+5=15 。
而内联样式里，选择器的叠加结果是 10+2=12 。
那外联样式的优先级不就比内联的高了么。

[jmyz0455]

@morewe 这个权重我知道，我一开始也这么想的，但是我就想问了
1 、权重在优先级上比是外部还是内部样式还要高？
2 、权重相同是不是就内部样式更优先？
3 、内联（也有人称行间）样式是不是就比 #id （无论外部内部）的优先级还要高？
那么说根本就没有外部》内部》内联之分，其实就是权重说了算（因为内联其实就等于 ID 选择器）

@htfy96 而 !important 比以上我问到的优先级都要高，不在讨论范围之内

[crs0910]

这里说的内联 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]

@crs0910 非常感谢，完全明白了！

[SoloCompany]

这某博客描述也是醉了，有些名词翻译出来让人看不懂能不翻译吗，内联样式当然应该是指 inline css 啊，还弄出一个行间样式>内联样式的让人摸不着头脑
style tag 和 link tag 本来就没有优先关系（都属于外联样式），只有先后顺序关系
硬是要区分来的话，或者可以叫内置样式表和外置样式表吧 (internal / external stylesheet)

[Phariel]

important > inline > 权重组合

[learnshare]

style 属性中的样式，比其他非 !important 的规则都高；
其他的一般看选择器权重，同样权重看远近（ style 先后，外部样式先后）

[franklinyu]

@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/ ）