即使使用相同的选择器，外部样式表也会覆盖内部样式表

Question

我有2个页面（SignIn和PasswordReset）和一个外部CSS文件（名为MainStyleSheet.css）。我的页面中有一些HTML元素，它们都有一个类（名为ab-control-container）。 在这两个页面中，我需要覆盖类ab-control-container的一些样式表。

让我感到困惑的问题是，在第一页（SignIn）中，内部样式表覆盖了外部，但我在第二页（PasswordReset）中那些内部样式表与样式表相同第一页，不是重写外部。

这是Chrome Inspect Element工具显示的内容： 第一页：

和第二页：！

问题是什么？为什么？

Answer 1

  

内部样式表覆盖了外部，因为我除外

<style>个元素在级联中没有<link>个样式表的优先级。

您可能会对style 属性（具有比任何规则集更高的特异性）感到困惑。

当两个规则集具有相同特异性的选择器时（这些选择器完全相同！）然后以后覆盖之前的。

您需要更改样式表的加载顺序或选择器的特异性。

有关详细信息，请参阅the cascade。

Answer 2

似乎PasswordReset在代码（第19行）中的内部CSS早于SignIn（第621行）。由此我假设外部样式表被引用在这些位置之间的某个位置，这产生了不同的规则顺序（后者覆盖了前面的规则）。

将PasswordReset中的内部CSS向下移动，在引用外部样式表的行下方，这应该修复它。