首先，先来判断一下下列选择器的权重大小
#wrap {}
.container {}
div {}
很显然，大家肯定都知道这里是id选择器 > 类选择器 > 元素选择器，即：#wrap > .container > div
那么，如果是下列选择器呢，你还知道他们的权重大小吗？可能这时已经不好判断了。
#wrap .container div {}
#wrap .form input[type='text'] {}
.container #box p::before {}
.container ul li a:hover {}
在搞清楚上面的问题之前，我们先来了解一下css底层判断权重大小的算法规则。
规则
首先，css会对每个选择器使用三个数(x,y,z)来表示对应的权重值，这三个数的含义如下：
- x：id选择器的数量
- y：类选择器、伪类选择器、属性选择器的数量
- z：元素选择器、伪元素选择器的数量
其次，css会将每个选择器对应的(x,y,z)数量值算出来，如下：
#wrap {} /* (1,0,0) */
.container {} /* (0,1,0) */
div {} /* (0,0,1) */
然后，再对每个选择器的x,y,z三个值一一进行对比，对比规则如下：
- x中谁值最大，谁就权重最大，然后就直接退出对比
- 如果x都相同，那么就对y进行对比，y中谁值最大，谁就权重最大，然后直接退出对比
- 如果y都相同，同理就对z进行对比，z中谁值最大，谁就权重最大
综上所述，以上三个选择器的权重大小就为：#wrap > .container > div
那么，接下来就带着结论，解答最开始的问题，判断以下选择器的权重大小
#wrap .container div {} /* (1,1,1) */
#wrap .form input[type='text'] {} /* (1,2,1) */
.container #box p::before {} /* (1,1,2) */
.container ul li a:hover {} /* (0,2,3) */
由上计算出的权重值可得：#wrap .form input[type='text'] > .container #box p::before > #wrap .container div > .container ul li a:hover
怎么样，现在是不是对css选择器权重大小的判断规则有了新的理解。其实我们可以在vscode中将鼠标移动到选择器上面，选择器上方就会提示对应的权重值，原理是一样的，如下图：
以上就是关于css是如何判断权重大小的问题，觉得讲得不错的朋友，希望能点个赞支持下，谢谢！
