第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；
(资料图)
第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；
第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；
第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；
此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；
权值计算 公式：
权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；
权值比较 规则：
当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应--> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000*个数 + 100*个数 + 10*个数 + 1*个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;
总结，这个比较规则就是三点
1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；
2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；
3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；
选择器的优先级：
通过上边的分析 我们就得出了单个选择器的优先级比较：
css属性!important
》内联样式
》ID选择器(#id)
》类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
》元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
》通用选择器(*)
》继承的样式
在vue中比如你要使用css控制element中的元素这时候就要使用/deep/,但有的编辑器这样写可以运行但会出红线，比如vsCode。在vsCode中尽量使用::v-deep
