CSS的样式层叠
CSS样式层叠指的是，当有多个CSS规则应用于同一个HTML元素时，这些规则是如何相互作用并决定元素最终的样式。
CSS层叠遵循特定的规则，以确定哪些属性最终应用于元素。
样式层叠可以理解为样式叠加，也就是这些样式组合在一起呈现怎样的渲染结果。
基本层叠规则如下：
- 权重：通用选择器（如*）的权重最低，标签选择器的权重高于类选择器，类选择器的权重高于ID选择器，ID选择器的权重最高。
- 顺序：后面定义的规则会覆盖前面的同选择器的规则，除非后面的规则有
!important声明。 - 继承：子元素可继承父元素的样式，除非有规则覆盖。
CSS选择器的优先级
！important > 内联样式 > ID选择器 > 类/伪类（前面1个冒号） /属性 > 元素 /伪元素（前面连续两个冒号） > 通配符/子选择器/相邻选择器
扩展一个很有实践意义的属性值优先级：min-width > max-width > width
选择器的优先级的计算
CSS 标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级。
- id 选择器的数目记为 a
- 伪类选择器和 class 选择器的数目记为 b
- 伪元素选择器和标签选择器数目记为 c；
- "*" 不影响优先级。
CSS 标准建议用一个足够大的进制，获取“ a-b-c ”来表示选择器优先级。
specificity = base * base * a + base * b + c
其中，base 是一个足够大的正整数。 关于 base，历史中有些趣闻，早年 IE6 采用 256 进制，于是就产生256 个 class 优先级等于一个 id这样的奇闻轶事，后来扩大到 65536，基本避免了类似的问题。
现代浏览器多采用了更大的数量，我们正常编写的 CSS 规则数量不太可能达到数万，因此我们可以认为这样的 base 就足够大了。
行内属性的优先级永远高于 CSS 规则，浏览器提供了一个口子，就是在选择器前加上!import。这个用法非常危险，因为它相当于一个新的优先级，而且此优先级会高于行内属性。
这部分内容来源：程劭非（winter）的重学前端课程
CSS书写顺序的建议
根据CSS属性对DOM的影响，结合DOM的计算布局过程，建议CSS采用下面的顺序书写
1.定位属性
position display float left top right bottom overflow clear z-index
2.自身属性
width height padding border margin background
3.文字样式
font-family font-size font-style font-weight font-varient color
4.文本属性
text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5.CSS3 中新增属性
content box-shadow border-radius transform
参考来源 vue中文社区
总结
在工作过程当中，我们需要了解CSS层叠相关的规则，方便写出符合预期的代码。了解这些规则，对CSS样式的利用就事半功倍了。
