CSS 选择器权重 | TryCoding.Fun

CSS 选择器权重

CSS 选择器优先级的计算规则

问题

CSS 选择器权重（优先级）是如何计算的？

解答

权重等级

CSS 选择器权重分为四个等级，通常用 (a, b, c, d) 表示：

等级	选择器类型	权重值
a	内联样式	1000
b	ID 选择器	100
c	类、伪类、属性选择器	10
d	元素、伪元素选择器	1

计算示例

/* 权重: 0, 0, 0, 1 = 1 */
p { color: red; }

/* 权重: 0, 0, 1, 0 = 10 */
.text { color: blue; }

/* 权重: 0, 1, 0, 0 = 100 */
#title { color: green; }

/* 权重: 0, 0, 1, 1 = 11 */
p.text { color: orange; }

/* 权重: 0, 1, 1, 1 = 111 */
#title p.text { color: purple; }

/* 权重: 0, 0, 2, 1 = 21 */
.container .text:hover { color: pink; }

/* 权重: 0, 1, 1, 2 = 112 */
div#nav a.link { color: yellow; }

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 权重: 1 */
    p { color: red; }
    
    /* 权重: 10 */
    .text { color: blue; }
    
    /* 权重: 100 */
    #intro { color: green; }
    
    /* 权重: 11 */
    p.text { color: orange; }
    
    /* 权重: 101 */
    #intro.text { color: purple; }
  </style>
</head>
<body>
  <!-- 显示 purple，因为 #intro.text 权重最高 -->
  <p id="intro" class="text">这段文字是紫色</p>
  
  <!-- 显示 orange，因为 p.text 权重高于 .text -->
  <p class="text">这段文字是橙色</p>
</body>
</html>

特殊情况

/* !important 优先级最高，覆盖所有其他规则 */
p { color: red !important; }

/* 内联样式权重 1000 */
/* <p style="color: blue;">文字</p> */

/* 通配符、组合符不影响权重 */
* { margin: 0; }           /* 权重: 0 */
div > p { color: red; }    /* 权重: 2 (两个元素选择器) */
div + p { color: blue; }   /* 权重: 2 */

/* :not() 本身不计权重，但括号内的选择器计算 */
p:not(.active) { }         /* 权重: 11 (p=1, .active=10) */

/* :where() 权重为 0 */
:where(.text) { }          /* 权重: 0 */

/* :is() 取括号内最高权重 */
:is(#id, .class) p { }     /* 权重: 101 (#id=100, p=1) */

权重相同时的规则

/* 权重相同，后定义的覆盖先定义的 */
.text { color: red; }
.text { color: blue; }  /* 生效 */

/* 同一元素多个类名，权重按选择器计算，不按类名数量 */
/* <p class="a b c">文字</p> */
.a { color: red; }      /* 权重: 10 */
.b { color: blue; }     /* 权重: 10，后定义生效 */

关键点

权重计算：内联(1000) > ID(100) > 类/伪类/属性(10) > 元素/伪元素(1)
!important 优先级最高，应谨慎使用
权重相同时，后定义的样式覆盖先定义的
通配符 *、组合符 >、+、~ 不影响权重
:where() 权重为 0，:is() 取括号内最高权重