关于 CSS 选择器权重，99% 的人都理解错了！

CSS 选择器的权重（特异性）是确定在多个选择器应用于同一元素时，哪个选择器的样式会最终生效的关键因素。然而，关于 CSS 选择器特异性的理解，常常存在一些常见的误解。本文将探讨这些误解，并帮助大家理解 CSS 选择器的权重。

误解一：权重是一个数字

CSS 选择器的权重并不是一些数字。所以，计算元素的权重时，并不是简单的将权重数值相加就可以了。

CSS 选择器的权重由三个部分组成，表示为 (a, b, c)，其中 a、b、c 分别代表了不同选择器类型的权重。具体规则如下：

注意 ：通配符选择器（如 *）、子选择器（如 >）、相邻兄弟选择器（如 +）和兄弟选择器（如 ~）对权重没有贡献，即它们的权重为 (0,0,0)。

权重计算规则 ：

1. 从左到右进行比较 ：首先比较最高位（内联样式），如果相同，则比较下一位，依此类推。例如（1, 0, 0）的优先级高于（0, 1, 0），而（0, 1, 0）的优先级高于（0, 0, 1）。

2. 权重相加 ：每个组成部分的权重是独立计算的，并且 不会累加 。比如，一个选择器中有两个类选择器（ . class1. class2 ）并不会使其权重变为（0,2,0），而是仍然保持为（0,1,0）。同样，一个选择器中有一个ID选择器和一个类选择器（ #id. class ）的权重是（1,1,0），而不是（2,0,0）。

3. !important 规则 ：如果在声明中使用了 !important ，它会覆盖其他所有的特异性。但需要注意的是， !important 只在同一来源的样式中有效。如果来自用户代理样式表（浏览器默认样式）或用户样式表的 !important 规则与来自作者样式表的普通规则冲突，那么用户代理样式表或用户样式表的 !important 规则会生效。

4. 来源顺序 ：如果两个规则的特异性相同，并且都没有使用 !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 ，其特异性（权重）的计算方式如下：

但是，这并不意味着三个类选择器加起来就是 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的层叠顺序中具有更高的权重。

当浏览器需要确定一个元素的最终样式时，它会按照以下步骤进行：

1. 计算特异性 ：首先，浏览器会计算每个应用于该元素的 CSS 规则的特异性。特异性越高的规则，其优先级越高。

2. 比较来源 ：如果两个或多个规则具有相同的特异性，浏览器会进一步比较这些规则的来源。通常，用户定义的样式（如浏览器扩展或用户样式表）会覆盖作者定义的样式（即网页开发者的样式表），而作者定义的样式会覆盖用户代理样式（即浏览器的默认样式）。

3. 考虑!important ：如果两个或多个规则具有相同的特异性和来源，并且其中至少有一个使用了 !important ，则使用了 !important 的规则会覆盖没有使用 !important 的规则。

4. 比较顺序 ：如果两个或多个规则具有相同的特异性、来源，并且都没有使用 !important ，或者都使用了 !important ，则最后定义的规则会覆盖先前定义的规则。

因此， !important 并不改变特异性，而是在特异性比较之后，作为一个额外的优先级判断依据。使用 !important 应该谨慎，因为它会破坏CSS的层叠和特异性规则，使得样式更难于维护和调试。在可能的情况下，最好通过优化选择器和组织样式规则来避免使用 !important 。