优先级计算

我们需要引入一个概念——特指度（specificity）。特指度表示一个 css 选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。 权重分为A,B,C三个级别，A > B > C , A,B,C 直接各自计算。也就是会优先计算 A 的权重，如果相等会计算 B 的权重。 当 A 、B 、C 所计算的权重都相等时（ABC三个值相等）相等时，后面声明的值将会是最终的计算值。

还有一个重点要注意：!important 优先级最高，高于上面一切。* 选择器最低，低于一切。

后代选择器的定位原则

浏览器 CSS 匹配不是从左到右进行查找，而是从右到左进行查找。比如 div#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找 html 中所有 class=‘red’ 的 span 元素，找到后，再查找其父辈元素中是否有 p 元素，再判断 p 的父元素中是否有 id 为 divBox 的 div 元素，如果都存在则匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

参考

说一下 CSS 选择器优先级