css选择器的权重值

CSS选择器的权重值详解

基本概念

在CSS中，选择器的权重是用于确定样式应用优先级的关键因素，当多个样式规则应用于同一元素时，权重最高的规则将生效，选择器的权重值由四部分组成，分别是内联样式、ID选择器、类选择器（包括伪类和属性选择器）、标签选择器（包括伪元素选择器） 。

权重等级

1、内联样式

权值：1000

说明：直接在HTML元素中使用style属性定义的样式，具有最高的权重值 。

2、ID选择器

权值：0100

示例：#example { color: blue; }

3、类选择器、伪类选择器和属性选择器

权值：0010

示例：.example { fontsize: 12px; }

4、标签选择器和伪元素选择器

权值：0001

示例：div { backgroundcolor: gray; }

5、通配符选择器、子选择器和相邻选择器

权值：0000

说明：这些选择器的权重最低，但仍然高于继承来的样式 。

权重计算与比较

权重的计算遵循特定的规则，通过将各个等级的选择器数量转换为数字，从左至右累加，形成最终的权重值，一个选择器div#example.select a::before 包括一个标签选择器、一个ID选择器、一个类选择器和一个伪元素选择器，其权重值为0001 + 0100 + 0010 + 0001 = 0112 。

优先级规则

1、权重值越大，优先级越高：若权重值不同，权重高的规则将覆盖权重低的规则 。

2、相同权重，后定义优先：如果两个样式规则的权重值相同，那么在样式表中后定义的规则会优先应用 。

3、!important声明：为样式添加!important声明，可覆盖任何其他样式，包括内联样式，这不增加权重值，但提升优先级 。

实用案例

假设有如下CSS规则：

div#content { color: red; } /权重值0101 */
.text { color: green; } /权重值0010 */
div p { color: blue; } /权重值0002 */

应用这些规则到一个<p class="text" id="content">Hello</p>元素上，该元素最终显示的颜色是绿色，因为尽管div#content选择器的权重更高，但.text选择器指定的是类选择器，且没有比它权重更高的同类型选择器覆盖它 。

理解并正确使用CSS选择器的权重和优先级规则，对于编写高效、可维护的CSS代码至关重要，通过合理分配权重值，开发者可以精确控制网页元素的样式表现，避免不必要的样式冲突和覆盖，无论是开发新手还是资深工程师，掌握这些基础知识都是提高CSS技能的重要步骤。