css3选择器优先级顺序
2026-10-31 16:15:37
CSS3 选择器的优先级顺序决定了当多个规则应用于同一元素时，哪个规则会生效。以下是详细的优先级规则和解释：
CSS3 选择器优先级顺序内联样式
直接写在 HTML 元素的 style 属性中的样式，优先级最高。
例如：<div style="color: red;">
ID 选择器
使用 # 指定的选择器，优先级次之。
例如：#header { color: blue; }
类选择器、属性选择器、伪类选择器
类选择器（如 .button）
属性选择器（如 [type="text"]）
伪类选择器（如 :hover）
这三者的优先级相同，但低于 ID 选择器。
标签选择器、伪元素选择器
标签选择器（如 div、p）
伪元素选择器（如 ::before）
这二者的优先级相同，但低于类选择器。
当多个选择器匹配同一元素时，浏览器会计算每个选择器的特定性（Specificity），特定性高的规则优先生效。特定性的计算方式如下（从左到右比较，高位优先）：
内联样式（1,0,0,0）
例如：style="..." 直接赋予最高优先级。
ID 选择器（0,1,0,0）
每个 ID 选择器增加一个单位。
例如：#nav .item 的特定性是 (0,1,1,0)。
类、属性、伪类选择器（0,0,1,0）
每个类、属性或伪类选择器增加一个单位。
例如：.menu:hover 的特定性是 (0,0,2,0)。
标签、伪元素选择器（0,0,0,1）
每个标签或伪元素选择器增加一个单位。
例如：div::before 的特定性是 (0,0,0,2)。
- #header .nav（0,1,1,0） > .menu li（0,0,1,1）
- div#main（0,1,0,1） > #sidebar（0,1,0,0）
- 如果特定性相同，后定义的规则生效（来源顺序）。
- !important 可以覆盖所有优先级规则（但应谨慎使用）。
- 通用选择器（*）和组合符（+、>、~）不影响特定性。
优先级顺序：内联样式 > ID 选择器 > 类/属性/伪类选择器 > 标签/伪元素选择器
特定性计算：(内联, ID, 类/属性/伪类, 标签/伪元素)
相同特定性时，后定义的规则生效。
通过理解这些规则，可以更精准地控制样式的应用顺序。
热门标签
