CSS优先级如何计算

首先，优先级有四个组成部分：内联样式、ID选择器、类选择器和标签选择器

内联样式 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0

B的值等于ID选择器（#id）出现的次数

C的值等于类选择器（.class）和属性选择器（a[href="https://www.baidu.com"]）和伪类选择器（:first-child）出现的总次数。

D的值等于标签选择器（div,span,a） 和伪元素选择器（::before,::after）出现的总次数

例如：#name>div>span>a.hover

套用上面的算法，依次求出A，B，C，D的值：

1. 因为没有内联样式 ，所以 A = 0

2. ID选择器总共出现了1次， B = 1

3. 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1

4. 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

通过以上步骤算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

优先级的比较规则

从左往右依次进行比较 ，较大者优先级更高；

如果相等，则继续往右移动一位进行比较；

如果4位全部相等，则后面的会覆盖前面的。

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

更多练习

// 标签选择器
li                                      /* (0, 0, 0, 1) */
ul li                                   /* (0, 0, 0, 2) */
ul ol+li                                /* (0, 0, 0, 3) */
// 标签选择器，属性选择器
h1 + *[REL=up]                          /* (0, 0, 1, 1) */
// 标签选择器，类选择器
ul ol li.red                            /* (0, 0, 1, 3) */
li.red.level                            /* (0, 0, 2, 1) */
// 类选择器
.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11     /* (0, 0, 11,0) */
// id选择器
#name                                   /* (0, 1, 0, 0) */
// 标签选择器，伪类，类选择器
li:nth-child(odd) main .name            /* (0, 0, 2, 2) */
// id选择器，类选择器，标签选择器，伪类
#name .active > a:hover                 /* (0, 1, 2, 1) */
// 标签选择器，id选择器，类选择器，伪类选择器
html body #name .active > a:hover       /* (0, 1, 2, 3) */

补充知识：伪类选择器有哪些 

:link ：选择未被访问的链接

:visited：选取已被访问的链接

:active：选择活动链接

:hover ：鼠标指针浮动在上面的元素

:focus ：选择具有焦点的

:first-child：父元素的首个子元素

补充知识：伪元素选择器有哪些

::first-letter ：用于选取指定选择器的首字母

::first-line ：选取指定选择器的首行

::before : 选择器在被选元素的内容前面插入内容

::after : 选择器在被选元素的内容后面插入内容