我有2个页面(SignIn和PasswordReset)和一个外部CSS文件(名为MainStyleSheet.css)。我的页面中有一些HTML元素,它们都有一个类(名为ab-control-container
)。
在这两个页面中,我都需要重写类ab-control-container
的某些样式表。
使我感到困惑的问题是,在第一页(SignIn)中,内部样式表覆盖了我所拒绝的外部样式,但是在第二页(PasswordReset)中,这些内部样式表与第一页的样式表相同,不覆盖外部。
这是Chrome Inspect Element工具显示的内容:
第一页:
第二页:
有什么问题,为什么?
最佳答案
内部样式表覆盖了我所排除的外部样式表
在层叠中,<style>
元素没有优先于<link>
样式表。
您可能会对style
属性(比任何规则集具有更高的特异性)感到困惑。
当两个规则集的选择器具有相同的特异性(并且确实如此,它们的选择器是完全相同的!),则后来的规则集将覆盖较早的选择器。
您需要更改样式表的加载顺序或选择器的特异性。
有关更多详细信息,请参见the cascade。
关于html - 即使使用相同的选择器,外部样式表也将覆盖内部样式表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49674939/