CSS 选择器优先级：为什么我的祖传样式不生效？

前端技术 Dec 30, 2026

CSS 选择器优先级：为什么我的祖传样式不生效？

学 CSS 的时候，最让人抓狂的事就是：明明写了样式，但就是不生效！你可能已经第 5 次在“祖传”样式上加了 !important，但翻车的同事告诉你“别用 !important，你会后悔的”。

老资格的选择器排行

如果 CSS 是一个江湖，选择器的优先级就像门派地位：

内联样式（style=””）——教主，说了就算
ID 选择器（#header）——长老，地位崇高
类、属性、伪类（.class [attr] :hover）——各派掌门
元素选择器（div p）——外门弟子
通配符（*）——派发走足

怎么记住？数点法（官方名称：特异度计算）

学习 CSS 优先级的终极武器就是“数点法”：

/* 笼统地说就是数一数有几个东西 */

/* 0-0-0-1: 1 个元素 */
div { color: red; }

/* 0-0-1-0: 1 个类 */
.my-class { color: blue; }

/* 0-1-0-0: 1 个 ID */
#my-id { color: green; }

/* 1-0-0-0: 内联样式 */
/* style="color: purple" */

/* 对比一下 */
#header .nav a { }  /* 0-1-1-1 */
body #main .box p { }  /* 0-1-1-2 */

注意：:not() 本身不计分，但里面的选择器计分！这是一个经典的考点。

实战练习

/* Case 1: 哪个生效？ */
.box .title { color: red; }       /* 0-0-2-0 */
#main .title { color: blue; }     /* 0-1-1-0 --> 蓝色生效 */

/* Case 2: 这个呢？ */
div.box p span { color: red; }    /* 0-0-1-3 */
p span.highlight { color: blue; } /* 0-0-1-2 --> 红色生效 */