层叠

在开发当中，我们都遇到过这种苦恼：为什么这个样式不生效？为什么这个样式不起作用？

当遇到这种规则没有按照预期生效时，可能是因为它与另一条规则冲突了。要想预测规则最终的效果，就需要理解CSS里的层叠。

当一些规则指向了同一个元素时，就会存在冲突的声明。可能是因为另一条规则跟它冲突了。浏览器为了解决这个问题会遵循一系列规则， 层叠指的就是这一系列规则。它决定了如何解决冲突，是CSS语言的基础。

当声明冲突时，层叠会依据三种条件解决冲突。

(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。

(2) 选择器优先级：哪些选择器比另一些选择器更重要。

(3) 源码顺序：样式在样式表里的声明顺序。