CSS选择器的优先级规则（从高到低）：
1. !important 声明
.text { color: red !important; }- 具有最高优先级
- 覆盖其他所有样式
2. 内联样式
<div style="color: blue;">内联样式</div>- 直接写在HTML元素的style属性中
- 优先级仅次于!important
3. ID选择器
#header { color: green; }- 以#开头的选择器
- 优先级高于类选择器
4. 类选择器、属性选择器、伪类选择器
.nav { color: purple; } /* 类选择器 */
[type="text"] { color: orange; } /* 属性选择器 */
a:hover { color: yellow; } /* 伪类选择器 */- 这三种选择器优先级相同
- 优先级高于元素选择器
5. 元素选择器、伪元素选择器
div { color: black; } /* 元素选择器 */
p::before { color: gray; } /* 伪元素选择器 */- 直接选择HTML标签
- 优先级最低（除了通配符）
6. 通配符选择器
* { margin: 0; }- 优先级最低
- 会被任何其他选择器覆盖
组合选择器的优先级
当选择器组合使用时，优先级会累加：
/* 低优先级 */
p { color: black; }
/* 中等优先级 */
.text { color: blue; }
p.text { color: red; } /* 元素 + 类 */
/* 高优先级 */
#title { color: green; }
#title.text { color: yellow; } /* ID + 类 */
#title.text p { color: purple; } /* ID + 类 + 元素 */相同优先级的处理
当多个规则具有相同优先级时，后出现的规则覆盖前面的规则：
.text { color: red; } /* 先定义 */
.text { color: blue; } /* 后定义，会覆盖上面的红色 */继承的特殊性
继承的样式没有优先级，任何直接选择的样式都会覆盖继承的样式：
body { color: gray; } /* 继承给所有子元素 */
p { color: black; } /* 直接选择，会覆盖继承的灰色 */实际应用示例
<div id="container" class="wrapper">
<p class="text highlight">这是什么颜色？</p>
</div>p { color: black; } /* 最低 */
.text { color: blue; } /* 较低 */
.highlight { color: green; } /* 较低 */
p.text { color: red; } /* 中等 */
.wrapper .text { color: purple; } /* 中等 */
#container p { color: yellow; } /* 较高 */
#container .text { color: orange; } /* 高 */最终显示橙色，因为#container .text的优先级最高。