CSS 选择器的权重（特异性）是确定在多个选择器应用于同一元素时，哪个选择器的样式会最终生效的关键因素。然而，关于 CSS 选择器特异性的理解，常常存在一些常见的误解。本文将探讨这些误解，并帮助大家理解 CSS 选择器的权重。误解一：权重是一个数字
CSS 选择器的权重并不是一些数字。所以，计算元素的权重时，并不是简单的将权重数值相加就可以了。
CSS 选择器的权重由三个部分组成，表示为 (a, b, c)，其中 a、b、c 分别代表了不同选择器类型的权重。具体规则如下：
ID选择器：权重值为（1, 0, 0），通过元素的ID选择器来匹配的样式。
类选择器、属性选择器和伪类选择器：权重值为（0, 1, 0），类选择器（如.example）、属性选择器（如[type="text"]）和伪类选择器（如:hover）具有相同的权重。
元素选择器和伪元素选择器：权重值为（0, 0, 1），元素选择器（如p）和伪元素选择器（如::before）具有相同的权重。
注意：通配符选择器（如 *）、子选择器（如 >）、相邻兄弟选择器（如 +）和兄弟选择器（如 ~）对权重没有贡献，即它们的权重为 (0,0,0)。
权重计算规则：
从左到右进行比较：首先比较最高位（内联样式），如果相同，则比较下一位，依此类推。例如（1, 0, 0）的优先级高于（0, 1, 0），而（0, 1, 0）的优先级高于（0, 0, 1）。
权重相加：每个组成部分的权重是独立计算的，并且不会累加。比如，一个选择器中有两个类选择器（.class1.class2）并不会使其权重变为（0,2,0），而是仍然保持为（0,1,0）。同样，一个选择器中有一个ID选择器和一个类选择器（#id.class）的权重是（1,1,0），而不是（2,0,0）。
!important 规则：如果在声明中使用了 !important，它会覆盖其他所有的特异性。但需要注意的是，!important 只在同一来源的样式中有效。如果来自用户代理样式表（浏览器默认样式）或用户样式表的 !important 规则与来自作者样式表的普通规则冲突，那么用户代理样式表或用户样式表的 !important 规则会生效。
来源顺序：如果两个规则的特异性相同，并且都没有使用 !important，那么后出现的规则会覆盖先出现的规则（即“后来者居上”的原则）。
例如：
/* 权重为 (0,0,1) */
div { color: red; }
/* 权重为 (0,1,0) */
.class1 { color: green; }
/* 权重为（1,0,0） */
#id1 { color: blue; }
/* 权重为（1,1,0）（因为 ID 选择器的权重高于类选择器）*/
#id1.class1 { color: purple; }
/* 权重为（0,1,0），因为只有一个类选择器 */
.class1 { color: red; }
/* 权重为（0,1,0），即使有两个类选择器，但它们的权重不会相加 */
.class1.class2 { color: blue; }
/* 权重为（1,1,0），因为一个ID选择器和一个类选择器的组合 */
#id1.class1 { color: green; }
/* 权重为（0,1,0），因为有三个类选择器，但每个类选择器的权重仍然是（0,1,0） */
.class1.class2.class3 { color: purple; }
在上面的例子中，即使选择器中包含多个相同的组成部分（如类选择器），每个组成部分的权重仍然是独立的，并且不会累加。因此，在选择器冲突时，特异性更高的选择器将覆盖特异性较低的选择器。如果特异性相同，则后出现的规则会覆盖先出现的规则（即“后来者居上”的原则）。
详细来看看最后一个例子：
对于选择器 .class1.class2.class3，其特异性（权重）的计算方式如下：
该选择器包含三个类选择器（.class1、.class2 和 .class3）。
在CSS特异性计算中，每个类选择器都贡献（0,1,0）的特异性值。
由于特异性值不会跨类型累加，我们只需关注类选择器这一位（即第三位）上的数量。
在这个例子中，有三个类选择器，但每个类选择器在类选择器这一位上的值仍然是 1。
但是，这并不意味着三个类选择器加起来就是 3。实际上，在选择器的特异性计算中，我们不会将类选择器这一位上的值相加。我们只需记录存在多少个类选择器（在这个例子中是三个）。然而，在描述特异性时，我们通常（0,3,0）不直接写出这样的表示法，因为按照标准的特异性表示法，我们只需指出在类选择器这一位上有三个单位（即 0,1,0 出现了三次）。
但是，为了明确和避免混淆，当我们谈论这种由多个同类选择器组成的选择器的特异性时，我们可能会说它在类选择器这一位上的特异性“权重”相当于（0,3,0）（尽管这不是标准的表示法）。不过，在比较选择器的特异性时，我们只需记住它在类选择器这一位上有三个单位。
因此，.class1.class2.class3 的特异性（权重）按照标准的表示法是 (0,1,0)（但因为有三个类选择器，所以在类选择器这一位上的“等效权重”可以理解为三个单位）。
误解二：使用style属性会增加权重
很多人认为，在 HTML 元素上直接使用style属性来定义 CSS 样式会增加样式权重。
在 HTML 元素上直接使用style属性并不会增加元素的特异性。实际上，style 属性定义的样式具有最高的优先级，这通常被称为“内联样式”或“行内样式”。但这种高优先级并非来源于特异性的计算，而是源于CSS层叠和冲突解决机制中的一个特殊规则。
CSS层叠的优先级规则中，style属性（内联样式）的优先级高于其他任何在样式表中定义的样式规则，无论这些样式规则使用了何种选择器（ID、类、元素等）。但请注意，这种优先级与特异性是两个不同的概念。
在作者定义的样式中，内联样式具有最高的优先级，即使其他样式规则具有更高的特异性。但请注意，这并不意味着内联样式具有更高的特异性；它只是在优先级上高于其他样式。因此，style属性并不会增加元素的权重。
误解三：使用!important会增加权重
我们知道，在 CSS 中使用 !important 会使得样式的优先级最高。不过，在 CSS 声明中使用 !important 并不会增加其特异性。
特异性（权重）是一个由选择器类型决定的权重系统，用于确定在多个样式规则应用于同一元素时，哪个规则会被优先应用。而!important则是一个覆盖机制，用于改变声明的优先级，使其在CSS的层叠顺序中具有更高的权重。
当浏览器需要确定一个元素的最终样式时，它会按照以下步骤进行：
计算特异性：首先，浏览器会计算每个应用于该元素的 CSS 规则的特异性。特异性越高的规则，其优先级越高。
比较来源：如果两个或多个规则具有相同的特异性，浏览器会进一步比较这些规则的来源。通常，用户定义的样式（如浏览器扩展或用户样式表）会覆盖作者定义的样式（即网页开发者的样式表），而作者定义的样式会覆盖用户代理样式（即浏览器的默认样式）。
考虑!important：如果两个或多个规则具有相同的特异性和来源，并且其中至少有一个使用了!important，则使用了!important的规则会覆盖没有使用!important的规则。
比较顺序：如果两个或多个规则具有相同的特异性、来源，并且都没有使用!important，或者都使用了!important，则最后定义的规则会覆盖先前定义的规则。
因此，!important并不改变特异性，而是在特异性比较之后，作为一个额外的优先级判断依据。使用!important应该谨慎，因为它会破坏CSS的层叠和特异性规则，使得样式更难于维护和调试。在可能的情况下，最好通过优化选择器和组织样式规则来避免使用!important。