前端面试（8）—CSS选择器的优先级是怎样的？
最新回答
无色的海
2026-10-25 10:21:31
CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器。具体到计算层面，优先级由A、B、C、D的值决定，计算规则如下：
- A：如果存在内联样式，则A=1，否则A=0。
- B：等于ID选择器出现的次数。
- C：等于类选择器、属性选择器和伪类出现的总次数。
- D：等于标签选择器和伪元素出现的总次数。
比较优先级时，从A到D依次比较值的大小，权重从左到右依次减小。判断时从左到右一一比较，直到比较出最大值即可停止。
例如，对于选择器ul ol li .red：
- 不存在内联样式，所以A=0。
- 不存在ID选择器，B=0。
- 存在一个类选择器，C=1。
- 存在三个标签选择器，D=3。
最终计算结果为：{0, 0, 1, 3}。
再如，对于选择器#red：
- 不存在内联样式，A=0。
- 存在一个ID选择器，B=1。
- 不存在类选择器、属性选择器和伪类，C=0。
- 不存在标签选择器和伪元素，D=0。
最终计算结果为：{0, 1, 0, 0}。
比较这两个选择器的优先级：
- 第二个例子的B（1）与第一个例子的B（0）相比，1>0，因此不需要再比较C和D的值，第二个选择器的优先级更高。
热门标签
