https://juejin.im/post/5be3d07be51d457d4932b043

优先级的计算规则
相信每位写过CSS的朋友都知道，CSS选择器的优先级关系是:

内联 > ID选择器 > 类选择器 > 标签选择器。

但是，浏览器具体的优先级算法是怎样的？可能还有些人不知道 。《CSS REFACTORING》 中提到了算法的过程 。
A specificity is determined by plugging numbers into (a, b, c, d):

If the styles are applied via the style attribute, a=1; otherwise, a=0.
b is equal to the number of ID selectors present.
c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
d is equal to the number of type selectors and pseudoelements present.

翻译过来就是
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A = 1, 否则 A = 0;
B 的值等于 ID选择器 出现的次数;
C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
D 的值等于 标签选择器 和 伪元素 出现的总次数 。

这样子直接看好像也还是很明白 ，那先上个例子：

nav-global > ul > li > a.nav-link

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

因为没有内联样式 ，所以 A = 0;
ID选择器总共出现了1次， B = 1;
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1；
标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3;

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。
为了熟悉掌握优先级算法 ，我们再来做一些练习：
li /* (0, 0, 0, 1) /
ul li / (0, 0, 0, 2) /
ul ol+li / (0, 0, 0, 3) /
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) */

x34y /* (0, 1, 0, 0) */

li:first-child h2 .title /* (0, 0, 2, 2) */

nav .selected > a:hover /* (0, 1, 2, 1) */

html body #nav .selected > a:hover /* (0, 1, 2, 3) */
复制代码OK， 现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？
比较规则是: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
再来看一下例子：

html:

<div class="nav-list" id="nav-list">
<div class="item">nav1</div>
<div class="item">nav2</div>
</div>
复制代码
CSS：

nav-list .item {

color: #f00;

}

.nav-list .item {
color: #0f0;
}
复制代码算出 #nav-list .item 的优先级是 (0, 1, 1, 0), .nav-list .item 的优先级是 (0, 0, 2, 0)。 左边第一位都是0， 再看看左边第二位，前者是1，后者是0， 所以（0, 1, 1, 0） 的大于 (0, 0, 2, 0) ，即 #nva-list .item 大于 .nav-list .item，所以字体会是红色。
优先级的特殊情况
经过上面的优先级计算规则，我们可以知道内联样式的优先级是最高的，但是外部样式有没有什么办法覆盖内联样式呢？有的，那就要 !important 出马了。因为一般情况下，很少会使用内联样式 ，所以 !important 也很少会用到！如果不是为了要覆盖内联样式，建议尽量不要使用 !important 。、
那可能有人会想，那如果我内联样式用了 !important，是不是外部样式就没有办法了呢？比如下面的代码：

HTML:

<div class="app" style="color:#f00!important">666</div>
复制代码
CSS:

.app {
color: 0f0!important;
}
复制代码是的，你赢了，这时候内联样式已经强大到不管你外部样式怎么写都无法覆盖它了。这种情况在实际代码中是要杜绝的！记住，千万不要在内联样式中使用 !important
最后 ， !important 真的是的无法超越的王者吗？其实不是的，一些情况，我们可以超越 !important, 请看下面的例子：

html:

<div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>
复制代码
css:

.box {
max-width: 100px;
}
复制代码这时候 .box 的宽度只有 100px , 而不是 300px, 可见，max-width 可以超越 width!important!但是，这实际上不是优先级的问题，因为优先级是比较相同属性的，而 max-width 和 width 是两个不同的属性。之所以举这个例子，是要告诉大家，有时候不管怎么设置容器的 width 都不生效，检查一下是不是有人写了 max-width 坑了你哈。

下面列表中，选择器类型的优先度是递减的。

内联样式(例如, style="...")
ID选择器(例如, #example)
类选择器(例如, .example)、属性选择器(例如, [type="radio"])、伪类(例如, :hover)
类型选择器(例如, h1)、伪元素(例如, ::before)
继承的样式

https://www.jianshu.com/p/641525122dcf

一、优先级分类
通常可以将css 的优先级由高到低分为6组：

第一优先级：无条件有限的属性只需要在属性后面使用！ important。它会覆盖页面内任何位置定义的元素样式。IE6不支持该属性。
第二优先级：在HTML中给元素标签加style，即内联样式。该方法会造成CSS难以管理，所以不推荐使用。
第三优先级：有一个或多个id选择器来定义。例如，#id{margin： 0}会覆盖.classname{margin: 3px}
第四优先级：有一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin: 3px}会覆盖div{margin: 6px}
第五优先级：有一个或多个类型选择器定义。如div{margin: 6px}覆盖{margin: 10px;}
第六优先级：通配选择器，如{margin: 6px;}
二、选择器的权重及优先规则
在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。入股两个规则的特殊性相同，那么后定义的规则优先。
那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：

css-priority.PNG

每个等级的初始值为0，
每个等级的叠加为选择器出现的次数相加
不可进位，比如0,99,99,99
依次表示为：0,0,0,0
每个等级计数之间没关联
等级判断从左向右，如果某一位数值相同，则判断下一位数值
如果两个优先级相同，则最后出现的优先级高，!important也适用
通配符选择器的特殊性值为：0,0,0,0
继承样式优先级最低，通配符样式优先级高于继承样式

计算示例：
a{color: yellow;} /特殊性值：0,0,0,1/
div a{color: green;} /特殊性值：0,0,0,2/
.demo a{color: black;} /特殊性值：0,0,1,1/
.demo input[type="text"]{color: blue;} /特殊性值：0,0,2,1/
.demo [type="text"]{color: grey;} /特殊性值：0,0,2,0*/

demo a{color: orange;} /特殊性值：0,1,0,1/

div#demo a{color: red;} /特殊性值：0,1,0,2/