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

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

stylesheet css-selectors css html

0

Arad · 技术社区 · 7 年前

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

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

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

第二页:!

问题是什么?为什么?

2 回复 | 直到 7 年前

1

Quentin 7 年前

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

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

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

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

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

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

2

1

Johannes 7 年前

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

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