层叠样式表，执行顺序，优先级：
下面来分析层叠的规则。当声明冲突时，层叠会依据三种条件解决冲突。
(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。
(2) 选择器优先级：哪些选择器比另一些选择器更重要。
(3) 源码顺序：样式在样式表里的声明顺序
层叠的规则是按照这种顺序来考虑的
选择器优先级的准确规则如下。
❑ 如果选择器的ID数量更多（ID选择器），则它会胜出（即它更明确）。
❑ 如果ID数量一致，那么拥有最多类的选择器胜出。
❑ 如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。
行内样式＞ID选择器＞类选择器＞标签选择器（其中还会以数量觉得优先级，但是数量觉得优先级必须同级别下，主要是看哪个更明确的指向该元素）
添加！important注释将声明提升到了更高优先级的来源。
通常最好让优先级尽可能低，这样当需要覆盖一些样式时，才能有选择空间。
源码顺序：如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。
链接样式：
书写顺序之所以很重要，是因为层叠。优先级相同时，后出现的样式会覆盖先出现的样式。如果一个元素同时处于两个或者更多状态，最后一个状态就能覆盖其他状态。如果用户将鼠标悬停在一个访问过的链接上，悬停效果会生效。如果用户在鼠标悬停时激活了链接（即点击了它），激活的样式会生效。这个顺序的记忆口诀是“LoVe/HAte”（“爱/恨”），即link（链接）、visited（访问）、hover（悬停）、active（激活）。注意，如果将一个选择器的优先级改得跟其他的选择器不一样，这个规则就会遭到破坏，可能会带来意想不到的结果。
层叠值：
浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值。元素的每个属性最多只有一个层叠值。
两条经验法则：
(1) 在选择器中不要使用ID。就算只用一个ID，也会大幅提升优先级。当需要覆盖这个选择器时，通常找不到另一个有意义的ID，于是就会复制原来的选择器，然后加上另一个类，让它区别于想要覆盖的选择器。
(2) 不要使用！important。它比ID更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个！important，而且依然要处理优先级的问题。这两条规则是很好的建议，但不必固守它们，因为也有例外。不要为了赢得优先级竞赛而习惯性地使用这两个方法。
来自-微信读书《深入解析CSS》
