深入理解css选择器的优先级

important [ɪmˈpɔːrtnt] 重要的 (英破嗯吃)
css Specificity 中文一般翻译为css优先级，css权重。相比"权重"，"优先级"更好理解。

1，什么是选择器优先级？
MDN上的解释：
优先级就是分配给指定的css选择器的一个权重，它由不同类型选择器的数值决定。
浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

2，优先级的计算规则
计算选择器优先级时需要先分析选择器（除了通用选择器 * ），为（a，b，c，d）中的各个变量赋予相应的数值，就能得到优先级。
（1）如果用style属性应用样式，则 a=1，否则 a=0。
（2）b 为ID选择器的数量。
（3）c 为类选择器，伪类选择器，属性选择器的总数量。
（4）d 为标签选择器，伪元素选择器的总数量。
以上各量计算完成后，把这些量拼接起来可得到选择器的优先级。
举个例子：
#nav-global > ul > li > a.nav-link {
color:#000;
}

用刚刚定义的算法，我们可以确定该选择器的优先级为（0，1，1，3）。

优先级也可以这样理解
划分四个等级：
第一等级：代表 内联样式，如：style="”，权值 1,0,0,0
第二等级：代表 ID选择器，如：#id=""，权值 0,1,0,0
第三等级：代表 class | 伪类 | 属性 选择器，如：.class | :hover，:link | [type]，权值 0,0,1,0
第四等级：代表 标签 | 伪元素 选择器，如：p，| ::after，::before，::selection，权值 0,0,0,1
此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0

优先级比较规则：
1，从最左侧开始依次向右逐个值来进行比较。
2，优先级完全相等时，采用后者优先原则。（也就是后面的样式覆盖前面的）
3，css属性后面加!important时，无条件绝对优先。（比内联样式还要优先）
4，低等级选择器的个数再多也无法超过高等级选择器的优先级。