四种 CSS 选择器优先级详细介绍

Question

CSS优先级包含四个级别：文内选择符、ID 选择符、Class 选择符、元素选择符，以及各级别出现的次数。根据这四个级别出现的次数计算得到 CSS 的优先级。

对优先级的读法，应该是以组来分，这个组之间相互独立，从左到右进行对比。它们成组出现，以逗号分隔。如下表

行内样式	ID选择器	CLASS选择器	标签选择器
1，0，0，0	0，1，0，0	0，0，1，0	0，0，0，1

下面是一些常见的选择器，我们一起来分析他们的优先级：

样式	分组情况	得分
#head	0，1，0，0	0100
.nav a	0，0，1，1	0011
#head .ad	0，1，1，0	0110

说明：

1. 得分最高，优先级最大！
2. 得分相同，后面的属性样式会覆盖前面的属性样式！
3. !important 声明的样式优先级最高，如果冲突再进行计算。
4. 继承得到的样式的优先级最低。