css选择器有很多，id选择器，class选择器，元素选择器，伪类选择器，伪元素选择器，属性选择器等。
场景选择器的权重大小：内联样式 -> id选择器 -> class / 伪类 / 属性选择器 -> 元素 / 伪元素选择器
那么我们应该如何去计算这些选择器的权重呢？
以下哪一个选择器的优先级最高呢？
#list {}
div {}
.container {}
.container #list::before {}
.container #list a::before {}
.container .form input[type="text"] {}
.container ul a:hover {}
这个需要选择器权重的计算，css一共将选择器分为三类，假设x / y / z；
x：id选择器y：类选择器，属性选择器，伪类选择器z：元素选择器，伪元素选择器
统计选择器当中x / y / z各自的数量，会组成一共三元组，根据三元组来判断选择器的权重大小
#list {} (1, 0, 0)
div {} (0, 0, 1)
.container {} (0, 1, 0)
.container #list::before {} (1, 1, 1)
.container #list a::before {} (1, 1, 2)
.container .form input[type="text"] {} (0, 3, 1)
.container ul a:hover {} (0, 2, 2)
.container .form input[type="text"] {} (0, 3, 1)以这个选择器来进行解释：其中存在两个class选择器和一个属性选择器，所以y = 3；其中存在一个元素选择器，所以z = 1，不存在id选择器，所以x = 0所以该选择器的权重表达式：
0, 3, 1
如何比较权重的大小呢？
逐位比较，从左到右，如果大于了则停止比较，如果相同则继续比较后面的值
(1, 0, 0) < (1, 1, 1)
(1, 1, 1) < (1, 1, 2)
所以在上面几个选择器中：.container #list a::before {}的优先级最高。
