css-priority

CSS 评论

CSS 选择器优先级

优先级规则

浏览器将样式表划分为四个级别，A、B、C、D

  • 如果存在内联样式 A 记为 1，否则记为 0
  • B 代表该样式表达式中 ID 选择器的个数
  • C 代表类、伪类、属性选择器的个数
  • D 代表 标签、伪元素个数

比较规则

将ABCD 组成四位数，比较大小即可，如样式1 的ABCD 规则计算结果是 0111，样式 2 的计算结果是 0011 则代表样式1 的优先级高于样式2。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        .red span { /* A0 B0 C1 D1 */
            color: black;
        }
       
        #red1 { /* A0 B1 C0 D0 */
            color: red;
        }

    </style>
    
    <div id="red" class="red">
        <span id="red1">
            你好
        </span>

    </div>

此时通过上述规则发现 0011 < 0100，所以 #red1 的样式生效。

提示，上述规则仅适合自身元素样式比较，继承来的属性优先级最低， !import 的优先级最高