CSS引入方式顺序对样式覆盖的影响是什么

来源：菜鸟站长作者：葵司头衔：网络博主

导读：本期聚焦于小伙伴创作的《CSS引入方式顺序对样式覆盖的影响是什么》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《CSS引入方式顺序对样式覆盖的影响是什么》有用，将其分享出去将是对创作者最好的鼓励。

CSS引入方式顺序对样式覆盖的影响核心由样式优先级规则决定，不同的引入方式对应不同的优先级权重，当多个样式作用于同一个元素时，优先级高的样式会覆盖优先级低的样式，若优先级相同则后引入的样式覆盖先引入的样式。

常见的CSS引入方式分类

日常开发中常用的CSS引入方式主要分为四类，按优先级从低到高排列如下：

当两种引入方式的优先级相同时，样式表的引入顺序会直接决定最终生效的样式，后加载的样式会覆盖先加载的同优先级样式。

假设我们有两个外部CSS文件，都定义了同一个div的背景色：

test1.css内容：

/* test1.css */
.box {
    background-color: red;
}

test2.css内容：

/* test2.css */
.box {
    background-color: blue;
}

在HTML中按如下顺序引入：

<link rel="stylesheet" href="test1.css">
<link rel="stylesheet" href="test2.css">
<div class="box">测试内容</div>

此时div的背景色为蓝色，因为test2.css后引入，覆盖了test1.css的同优先级样式。

同一个页面内写多个<style>标签时，后写的内部样式会覆盖先写的同优先级样式：

<style>
.box {
    font-size: 14px;
}
</style>
<style>
.box {
    font-size: 16px;
}
</style>
<div class="box">测试内容</div>

最终div的字体大小为16px，后定义的内部样式覆盖了先定义的样式。

不管引入顺序如何，高优先级的引入方式样式都会覆盖低优先级的样式，优先级顺序为：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。

示例如下：

<style>
.box {
    color: green;
}
</style>
<div class="box" style="color: orange;">测试内容</div>

此时div的文字颜色为橙色，因为内联样式的优先级高于内部样式表，即使内部样式表后引入也无法覆盖内联样式。

如果在样式后添加!important声明，该样式的优先级会提升到最高，无论引入方式顺序如何，都会覆盖其他没有添加!important的同属性样式：

<style>
.box {
    color: green !important;
}
</style>
<div class="box" style="color: orange;">测试内容</div>

此时div的文字颜色为绿色，因为内部样式表的color属性添加了!important，优先级高于内联样式。

为了更清晰判断样式优先级，我们可以参考如下权重计算规则：

当权重值相同时，才需要考虑引入顺序的影响，后引入的样式覆盖先引入的样式。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。