优先级

!import > 内联样式 > 权重 > 层叠性

css中是否有!import：

有则选!import；如果都有!import，则看权重，选权重大的；如果权重也一样的，看层叠性；没有则看内联样式；没有内联样式就比权重；权重一样的，看层叠性；权重计算

选择器权重值格式：(a, b, c)

a：表示一个复杂选择器中【ID】选择器的个数。b：表示一个复杂选择器中【类、伪类、属性】选择器的个数。c：表示一个复杂选择器中【元素、伪元素】选择器的个数。

// 【ID】：0// 【类、伪类、属性】：.wrapper/.list - 2// 【元素、伪元素】: div/ul/li - 3// 权重：(0, 2, 3)div.wrapper>ul.list>li {  color: orange;}// 【ID】：0// 【类、伪类、属性】：.wrapper/.list - 2// 【元素、伪元素】: div/ul/li - 3// 权重：(0, 2, 3)div.wrapper ul.list li {  color: red;}// 【ID】：0// 【类、伪类、属性】：.wrapper/[a="hello"] - 2// 【元素、伪元素】: ul/li - 2// 权重：(0, 2, 2).wrapper ul[a="hello"]>li {  color: green;}

上面的示例中，先对比权重a，都是0，平手；再对比权重b，都是2，平手；最后对比权重c，可以把第三个pass掉，那么第一个与第二个权重一样，可以通过css的层叠性-后面覆盖前面，可以判断出最终结果是第二个，红色。

注意：并集选择器中，只能计算其中一个，例如：

// 【ID】：0// 【类、伪类、属性】：.box1 - 1// 【元素、伪元素】: 0// 权重：(0, 1, 0).box1, .box2, .box3 {  color: red;}

在vscode中，把鼠标悬浮在选择器上，可以直接查看选择器的权重。