CSS样式的优先级（层叠）

CSS叫做层叠样式表
Cascading Style Sheets
层叠样式的概念是非常重要的，在最基础的层面上表示了CSS规则的顺序很重要，但是它更加复杂。什么选择器在层叠中胜出取决于三个因素

• 重要性 importance
• 专有性 specificity
• 源代码次序 source order

重要性

CSS中，有一个特殊的语法享有绝对优先级 ! important 把他加载在属性值的后面，可以让这条声明拥有最高优先级。

字符字符字符字符字符字符

p {
  color:red ! important;
}
#app {
  color:black
}

一旦设置了 !important，那么源代码次序即使是在后面，也不会起效果。同时，专有性也不会其效果。

但也并非绝对

如果你合理的利用 源代码次序和重要性这两个特性，

字符字符字符字符字符字符

p {
  color:red ! important;
}
#app {
  color:black ! important
}

---

（不建议）（不建议）（不建议）（不建议）（不建议）（不建议）
由于大家都是!important 而且按照 源代码次序，那么后来的color一定会把前面的颜色给覆盖掉。
（不建议） （不建议）（不建议）（不建议）

---

因为大量的事实证明 ！important 本身的出现往往是不得已而为之的情况，也就是说只有到了你不得不使用它(事实证明，极少出现这种情况，往往是因为懒)。

为什么重要性 !important 不建议使用？

因为 !important 很重要的一点是，他改变了另外两条CSS的层叠规则！
一旦使用了绝对权力的 !important ，层叠顺序就会乱了套，在大型项目中往往会出现很多不可预期的错误。

专有性

专有性是基本上衡量选择器具体成都的一种办法 --- 它能够匹配多少元素
不同的选择器对应的优先级完全不同，其中ID选择器是最高的。

选择器	千位	百位	十位	个位	总计值
H1	0	0	0	1	0001
#id	0	1	0	0	0100
h1+p::first-letter	0	0	0	3	0003
li>a[name='demo'] > .inline	0	0	2	2	0022
无选择器，位于style属性中	1	0	0	0	1000

注意 通用选择器(*) 符合选择器（+ > ~ ''）以及否定选择伪类(:not) 不会影响优先级。
不过由于他们之后往往都跟随者其它选择器，所以还是要注意。

源代码次序

如果比较了 重要性和专有性 之后，依然没有比较出来谁胜利，那么久按照后来者优先，由 源代码次序来决定获胜。

混合规则

注意！！！ 注意！！！

以上所有的规则均没有优先级之分，也就是说三个规则会同时其效果，层叠样式才是最佳实践。
前面所说的，我们利用 !important来重写后面的规则，其实就是破坏了层叠的顺序（源代码次序凌驾于!important之上），导致了谁靠后引入，谁就更高优先级。

字符字符字符字符字符字符

p {
  color:red ! important;
}
#app {
  color:black ! important
}