内联样式与外部样式表哪个优先级高_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）。

壁纸样机神器

免费壁纸样机生成

0

查看详情

示例：

因为 !important 的存在，即使有内联样式，颜色依然为绿色。

4. 实际开发建议

虽然内联样式优先级高，但不推荐频繁使用，原因包括：

• 难以维护，样式与结构混杂
• 不利于复用和团队协作
• 无法利用缓存提升性能（外部样式表可被浏览器缓存）

推荐将样式集中写在外部CSS文件中，通过类名控制样式，保持结构清晰。

基本上就这些。掌握优先级有助于避免样式冲突，写出更可靠的CSS代码。

以上就是内联样式与外部样式表哪个优先级高_css优先级规则讲解的详细内容，更多请关注php中文网其它相关文章！