Day07【CSS】特异性 Specificity（样式权重）

「特异性」是让浏览器计算
哪个 CSS 属性值
与某个 HTML element 最有关系，
然後套用该属性。

比方说，如果 CSS 同时在两处
定义了同一个 HTML element 的 color，
则会依照撰写时的特异性（权重分数）
来决定该 HTML element 要套用哪个 color。

CSS 特异性（样式权重）排序

!important
行内样式（inline style）
id 选择器（id selector）
class / attributes / 伪类选择器（class / attribute / pseudo-class selector）
元素 / 伪元素选择器（type selector / pseudo-element selector）
*，全体选择器（universal selector）

计算特异性的规则如下

等级 A：「id」选择器的个数加总
等级 B：「class、attributes、伪类」选择器个数加总
等级 C：「元素、伪元素」选择器个数加总
*，全体选择器不计分
等级只能同级比较，低等级无法叠加来超越更高的等级
inline style 永远会覆写 stylesheets 中的样式
!important 拥有最高优先权，规则如下：
- !important 在样式中出现时，浏览器会直接套用，不计算特异性
- 如果同时有两个 !important，会进行选择器的特异性计算
- 如果两个 !important 特异性相同，则後面声明的样式会覆盖前面的样式
- 一个样式只能使用一个 !important ，叠加没有效果

如下的第二个 !important 是没有意义的
 color:blue !important !important;

特异性计算范例

*               /* A=0 B=0 C=0 -> 特异性分数 = 0-0-0 */
LI              /* A=0 B=0 C=1 -> 特异性分数 = 0-0-1 */
UL LI           /* A=0 B=0 C=2 -> 特异性分数 = 0-0-2 */
UL OL+LI        /* A=0 B=0 C=3 -> 特异性分数 = 0-0-3 */
H1 + *[REL=up]  /* A=0 B=1 C=1 -> 特异性分数 = 0-1-1 */
UL OL LI.red    /* A=0 B=1 C=3 -> 特异性分数 = 0-1-3 */
LI.red.level    /* A=0 B=2 C=1 -> 特异性分数 = 0-2-1 */
#x34y           /* A=1 B=0 C=0 -> 特异性分数 = 1-0-0 */
#s12:not(FOO)   /* A=1 B=0 C=1 -> 特异性分数 = 1-0-1 */