前端教程：CSS样式优先级是怎样划分的？
最新回答
他年词笔隐
2026-02-08 20:39:59
CSS样式优先级由选择器权重决定，权重高的样式优先生效。以下是优先级划分的核心规则：
一、基础选择器权重CSS为不同基础选择器分配了固定权重值（假设数值）：
- 标签选择器（如 p）：权重 = 1
- 类选择器（如 .blue）：权重 = 10
- ID选择器（如 #header）：权重 = 100
- 行内样式（style属性）：权重 ≈ 1000（远高于其他选择器）
- !important：强制优先级最高，覆盖所有规则
复合选择器的权重是各基础选择器权重的叠加（非简单相加）：
- 示例：
p strong（标签+标签）：权重 = 1 + 1 = 2
.father strong（类+标签）：权重 = 10 + 1 = 11
#header .blue（ID+类）：权重 = 100 + 10 = 110
#header strong.blue（ID+标签+类）：权重 = 100 + 1 + 10 = 111
注意：权重叠加是字符串拼接而非数值相加。例如：
- 11个标签选择器（div div div...）的权重为 1,1,1...（共11位），仍小于类选择器（10）。
权重高的优先：比较选择器的总权重，数值大的生效。示例：#header（100） > .blue（10） > p（1）。
继承样式权重为0：父元素的样式即使权重高，被继承后权重为0，子元素自身样式优先。示例：
#header { color: green; } /* 权重100，但被继承时权重=0 */strong { color: red; } /* 权重1，生效 */权重相同，就近原则：后定义的样式覆盖先定义的（代码顺序或引入顺序）。示例：
<link rel="stylesheet" href="style1.css"> <!-- #header {color:red;} --><style> #header {color:gray;} </style> <!-- 后定义，生效 -->!important 强制优先：无论权重如何，带 !important 的属性优先级最高。示例：
#header { color: red !important; } /* 强制生效 */
案例1：
.inner { text-decoration: line-through; } /* 权重10 */div div div...div { text-decoration: underline; } /* 权重11个1 */结果：类选择器权重更高，显示删除线（权重比较是字符串形式，10 > 1,1,1...）。
案例2：
<p id="header" style="color:blue;">文本</p>结果：行内样式（权重≈1000）覆盖 #header（100），显示蓝色。
优先级从高到低：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 继承样式复合选择器权重叠加时，按选择器类型逐级比较（如 1,0,1 > 0,11,0）。
通过理解权重计算和优先级规则，可以更精准地控制样式生效顺序。
热门标签
