优先级是如何计算的
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
选择器类型
- 元素选择器（包括伪元素
:before） - class 选择器、属性选择器(
type="text") 伪类选择器(:hover)等 - id 选择器
通配选择符（universal selector）（*）关系选择符（combinators）（+, >, ~, '', ||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。
权重等级
!important- 行内样式
style="xxx" - ID选择器，权重为100
- class 选择器、属性选择器(
type="text") 伪类选择器(:hover)等 权重为10 - 元素选择器（包括伪元素
:before） 权重为1
因为内联样式和!important不属于选择器类型，所以不过多介绍，记住，尽量不要使用!important， 关于为何不在样式中使用!important，这里有一篇相关文章介绍https://juejin.cn/post/6844903913909387278。
最后推荐一个网站，用来对 CSS 权重进行计算和比较的 css-specificity-calculator-gflmszgtt.now.sh
如图 page.png
只要在输入框输入相应的 CSS 选择器即可。
