CSS 选择器的权重（特异性）是确定在多个选择器应用于同一元素时，哪个选择器的样式会最终生效的关键因素。然而，关于 CSS 选择器特异性的理解，常常存在一些常见的误解。本文将探讨这些误解，并帮助大家理解 CSS 选择器的权重。
CSS 选择器的权重并不是一些数字。所以，计算元素的权重时，并不是简单的将权重数值相加就可以了。
CSS 选择器的权重由三个部分组成，表示为 (a, b, c)，其中 a、b、c 分别代表了不同选择器类型的权重。具体规则如下：
注意：通配符选择器（如 *）、子选择器（如 >）、相邻兄弟选择器（如 +）和兄弟选择器（如 ~）对权重没有贡献，即它们的权重为 (0,0,0)。
权重计算规则：
例如：
/* 权重为 (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)（但因为有三个类选择器，所以在类选择器这一位上的“等效权重”可以理解为三个单位）。
很多人认为，在 HTML 元素上直接使用style属性来定义 CSS 样式会增加样式权重。
在 HTML 元素上直接使用style属性并不会增加元素的特异性。实际上，style 属性定义的样式具有最高的优先级，这通常被称为“内联样式”或“行内样式”。但这种高优先级并非来源于特异性的计算，而是源于CSS层叠和冲突解决机制中的一个特殊规则。
CSS层叠的优先级规则中，style属性（内联样式）的优先级高于其他任何在样式表中定义的样式规则，无论这些样式规则使用了何种选择器（ID、类、元素等）。但请注意，这种优先级与特异性是两个不同的概念。
内联样式
作者的样式表
重要的作者样式
普通的作者样式
用户代理样式（User Agent Stylesheet）：浏览器的默认样式，如默认字体大小、颜色等。
用户样式（User Styles）：通过浏览器设置或扩展自定义的样式。
作者样式（Author Styles）：在样式表中定义的样式。
在作者定义的样式中，内联样式具有最高的优先级，即使其他样式规则具有更高的特异性。但请注意，这并不意味着内联样式具有更高的特异性；它只是在优先级上高于其他样式。因此，style属性并不会增加元素的权重。
我们知道，在 CSS 中使用 !important 会使得样式的优先级最高。不过，在 CSS 声明中使用 !important 并不会增加其特异性。
特异性（权重）是一个由选择器类型决定的权重系统，用于确定在多个样式规则应用于同一元素时，哪个规则会被优先应用。而!important则是一个覆盖机制，用于改变声明的优先级，使其在CSS的层叠顺序中具有更高的权重。
当浏览器需要确定一个元素的最终样式时，它会按照以下步骤进行：
因此，!important并不改变特异性，而是在特异性比较之后，作为一个额外的优先级判断依据。使用!important应该谨慎，因为它会破坏CSS的层叠和特异性规则，使得样式更难于维护和调试。在可能的情况下，最好通过优化选择器和组织样式规则来避免使用!important。
本文链接：http://www.28at.com/showinfo-26-87262-0.html关于 CSS 选择器权重，99% 的人都理解错了！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 如何用Python实现网红儿童计算器游戏
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号