代码之家  ›  专栏  ›  技术社区  ›  Arad

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

  •  0
  • Arad  · 技术社区  · 6 年前

    我有2个页面(SignIn和PasswordReset)和一个外部CSS文件(名为MainStyleSheet.CSS)。我的页面中有一些HTML元素,它们都有一个类(名为 ab-control-container )。 在这两个页面中,我都需要重写类的一些样式表 ab控制容器

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

    这是Chrome Inspect Element tool显示的内容: 首页:

    firstpage 第二页:!

    enter image description here 问题是什么?为什么?

    2 回复  |  直到 6 年前
        1
  •  1
  •   Quentin    6 年前

    内部样式表正在覆盖外部样式表,我除外

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

    你可能会感到困惑 style 属性 (比任何规则集都具有更高的特异性)。

    当两个规则集的选择器具有相同的特异性时(这些选择器确实具有相同的特异性,它们的选择器是完全相同的!)然后 后来 一个覆盖 早些时候 一个。

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

    看见 the cascade 了解更多详细信息。

        2
  •  1
  •   Johannes    6 年前

    似乎是 PasswordReset 代码中的内部CSS(第19行)比 SignIn (第621行)。由此,我假设外部样式表是在这些位置之间的某个位置引用的,这会产生不同的规则顺序(后面的规则覆盖前面的规则)。

    将内部CSS移入 密码重置 再往下看,在引用外部样式表的行下面,这应该可以修复它。