如何计算 CSS 的优先级？

CSS 优先级也称为特异性或Specificity决定了当多个样式规则应用于同一个元素时哪一个规则会生效。计算 CSS 优先级的核心规则如下1. 优先级计算权重特异性CSS 选择器的优先级通常用一个四位数的向量(a, b, c, d)来表示数值越大优先级越高。a (行内样式): 元素标签的style属性中的样式。例如div stylecolor: red;权重1, 0, 0, 0b (ID 选择器): 选择器中 ID 的数量。例如#header,#nav #menu权重0, 1, 0, 0(每个 ID 加 1)c (类、属性、伪类): 选择器中类选择器 (.class)、属性选择器 ([typetext]) 和伪类 (:hover,:nth-child()) 的数量。例如.btn,div.container,a:hover,[disabled]权重0, 0, 1, 0(每个类/属性/伪类加 1)注意伪元素如::before,::after算作 d 类不计入 c。d (标签、伪元素): 选择器中标签选择器 (div,p) 和伪元素 (::before,::after) 的数量。例如div,p::first-line权重0, 0, 0, 1(每个标签/伪元素加 1)通配符选择器 (*)、组合器 (,,~, 空格) 和:not()伪类本身不增加优先级但:not()内部的参数会计算优先级。2. 计算示例让我们计算几个选择器的优先级div1 个标签权重(0, 0, 0, 1).container1 个类权重(0, 0, 1, 0)#main .box div1 个 ID (#main)1 个类 (.box)1 个标签 (div)权重(0, 1, 1, 1)div#header .nav-item:hover1 个 ID (#header)1 个类 (.nav-item)1 个伪类 (:hover)2 个标签 (div, 隐含在结构中但这里只算显式的div) - 实际上选择器是div#header(1标签) 和.nav-item:hover(0标签)修正div#header(1标签, 1ID) .nav-item:hover(1类, 1伪类)权重(0, 1, 2, 1)stylecolor: blue;(行内样式)权重(1, 0, 0, 0)比较结果(1, 0, 0, 0) (0, 1, 2, 1) (0, 1, 1, 1) (0, 0, 1, 0) (0, 0, 0, 1)即行内样式 ID 选择器 类选择器 标签选择器3. 特殊情况!important!important是一个特殊的标记它可以覆盖正常的优先级计算规则。带有!important的声明优先级最高除了行内样式中的!important。如果多个规则都有!important则按照上述的优先级规则特异性进行比较。建议尽量避免使用!important因为它会破坏 CSS 的层叠机制使代码难以维护。只有在需要覆盖第三方库样式或处理极其复杂的特殊情况时才使用。4. 优先级相同怎么办如果两个选择器的优先级特异性完全相同那么后定义的样式会覆盖先定义的样式即“后声明者优先”。/* 优先级相同 (0, 0, 1, 0) */.box{color:red;}.container{color:blue;}/* 如果元素同时匹配 .box 和 .container颜色将是 blue因为 .container 定义在后 */总结口诀行内样式老大权重最高。ID 选择器老二。类/属性/伪类老三。标签/伪元素老四。通配符/组合器不计分。!important是外挂慎用。权重相同看先后后写的生效。理解这些规则有助于你编写更清晰、可维护的 CSS 代码避免样式冲突。