内联样式与外部样式表哪个优先级高_css优先级规则讲解
内联样式优先级高于外部样式表，因权重为1000，而ID、类、标签等选择器权重依次降低，浏览器按权重累加值决定样式应用；当使用!important时，其优先级最高，可超越内联样式；开发中推荐将样式集中于外部CSS文件，通过类名控制，以提升维护性、复用性与性能。
内联样式的优先级高于外部样式表。当多个CSS规则作用于同一个元素时，浏览器会根据CSS优先级规则决定应用哪条样式。
1. CSS优先级的基本规则
CSS优先级由选择器的权重决定，权重越高，样式越优先。常见的权重等级如下：
- 内联样式（如：style="color: red;"）— 权重为 1000
- ID选择器（如：#header）— 权重为 100
- 类选择器、属性选择器、伪类（如：.btn, [type="text"], :hover）— 权重为 10
- 标签选择器、伪元素（如：div, ::before）— 权重为 1
- 通配符选择器（如：*）— 权重为 0
浏览器通过累加选择器中各部分的权重来计算总优先级。例如：#nav .link:hover 的权重是 100 + 10 + 10 = 120。
2. 内联样式 vs 外部样式表
尽管外部样式表和内部样式表（写在
例如：
这段文字显示为红色
虽然外部/内部定义了 color: blue，但内联样式中的 color: red 优先级更高，因此文字显示为红色。
3. !important 的特殊地位
如果在CSS声明中使用 !important，该声明将获得最高优先级，甚至高于内联样式（除非内联样式也加了 !important）。
示例：
这段文字显示为绿色
因为 !important 的存在，即使有内联样式，颜色依然为绿色。
4. 实际开发建议
虽然内联样式优先级高，但不推荐频繁使用，原因包括：
- 难以维护，样式与结构混杂
- 不利于复用和团队协作
- 无法利用缓存提升性能（外部样式表可被浏览器缓存）
推荐将样式集中写在外部CSS文件中，通过类名控制样式，保持结构清晰。
基本上就这些。掌握优
先级有助于避免样式冲突，写出更可靠的CSS代码。
