CSS的范围class

Question

<style>
.bgClr{
background-color: lightgreen;
}
</style>

<link href=@Url.Content("~/Content/css/xyz.css") rel="stylesheet" />
<div>......
<input type="text" class="bgClr" />
....</div>

这是我在 html 页面中编写的代码。在xyz.css中，我定义了同样的cssclass这样的

.bgClr{
background-color: red;
} // in xyz.css

但结果，控件的背景色颜色始终为红色。

请问为什么xyz.css的.bgClr总是被占用的原因？

Answer 1

因为是后来附上的。如果外部样式表放在内部样式表之后，它将覆盖所有先前已经定义的选择器（internals 或 externals）。

但是如果你有内联样式，它们的优先级最高

Answer 2

它采用您 html 中最新添加的样式表的样式。尝试将样式表 link 放在最顶部。

Answer 3

代码和外部 link 顺序解释。这意味着最底部的 link 将覆盖前面的。

Answer 4

这与范围无关，而与特异性有关。

文件中的定义被认为具有更高的特异性，因为它是后来声明的。

还有很多其他影响特异性的因素，您可以在此处阅读所有相关信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CSS的范围class

Scope of CSS class

html

css

stylesheet