当两个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
可能会导致样式难以维护,因此建议尽量避免使用,并通过合理组织CSS文件和选择器的优先级来管理样式。
近期评论