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

【问题标题】：External stylesheets are overriding internal, even with the same selector外部样式表覆盖内部样式表，即使使用相同的选择器
【发布时间】：2018-04-05 14:30:39
【问题描述】：

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

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

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

第二页：！

有什么问题，为什么？

【问题讨论】：

如果相同的特异性最后一个将获胜......所以检查订单
将内部的放在外部的之后（如果它们是覆盖）。样式适用于特定性，在特定性相同的情况下，规则的顺序开始发挥作用，后来出现的规则会覆盖较早的规则

标签： html css css-selectors stylesheet

【解决方案1】：

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

<style> 元素的优先级不高于级联中的<link>ed 样式表。

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

当两个规则集的选择器具有相同的特异性时（它们确实如此，它们的选择器完全相同！）然后较晚的的会覆盖较早的的。

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

更多详情请见the cascade。

【讨论】：

【解决方案2】：

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

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

【讨论】：