css层叠与优先级

概念：CSS 是 Cascading Style Sheets 的缩写，这暗示层叠（cascade）的概念是很重要的。在最基本的层面上，它表明CSS规则的顺序很重要，但它比那更复杂。什么选择器在层叠中胜出取决于三个因素（这些都是按重量级顺序排列的——前面的的一种会否决后一种）

• 重要性
• 专用性
• 源码代码次序

1、重要性：在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。  

tips:重载这个 !important 声明的唯一方法是在后面的源码或者是一个拥有更高专用性的源码中包含相同的 !important 特性的声明。

2、专用性：专用性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示，元素选择器具有很低的专用性。类选择器具有更高的专用性，所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器. 战胜ID选择器的唯一方法是使用 !important。

一个选择器具有的专用性的量是用四种不同的值（或组件）来衡量的，它们可以被认为是千位，百位，十位和个位——在四个列中的四个简单数字：

1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性中无影响。

选择器	千位	百位	十位	个位	合计值
h1	0	0	0	1	0001
#indentifier	0	1	0	0	0100
h1 + p::first-letter	0	0	0	3	0003
li > a[href*="zh-CN"] > .inline-warning	0	0	2	2	0022
没有选择器, 规则在一个元素的 <style> 属性里	1	0	0	0	1000

3、源代码次序：如果选择器具有相同的重要性与专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则