其它教程 · 2024年10月10日

当两个CSS文件中的样式相同的类(class)发生冲突时优先级

当两个CSS文件中的样式相同的类(class)发生冲突时,浏览器会根据CSS的层叠规则(Cascading Style Sheets)来决定应用哪个样式。通常情况下,后面的样式会覆盖前面的样式,这被称为“后来者居上”原则。

<link href="/assets/css/main.css" rel="stylesheet" />
<link href="/assets/css/custom.css" rel="stylesheet" />

custom.css 链接在 main.css 之后,所以如果 custom.css 和 main.css 中存在相同的类样式,浏览器会优先应用 custom.css 中的样式。

如果你想要确保某个特定的样式总是被应用,你可以使用更具体的CSS选择器,或者添加 !important 标志来强制应用该样式,例如:

.some-class { color: red !important; }

但是,过度使用 !important 可能会导致样式难以维护,因此建议尽量避免使用,并通过合理组织CSS文件和选择器的优先级来管理样式。