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

Question

I have 2 pages (SignIn and PasswordReset) and an external CSS file (named MainStyleSheet.css). I have some HTML elements in my pages which all have a class (named ab-control-container ). In both pages, I need to override some stylesheet for the class ab-control-container .

The problem which is confusing me is that in the in the first page (SignIn), internal stylesheets are overriding the external as I excepted, but in the second page (PasswordReset) those internal stylesheets which is as the same as stylesheets of the first page, are NOT overriding external.

this is what Chrome Inspect Element tool shows: first page:

and the second page: !

What is the problem and Why?

Answer 1

internal stylesheets are overriding the external as I excepted

<style> elements do not have priority over <link> ed stylesheets in the cascade.

You might be getting confused with style attributes (which have higher specificity than any ruleset).

When two rulesets have selectors with equal specificity (and these do, they selectors are completely identical!) then later ones override earlier ones.

You need to change the order the stylesheets are loaded in, or the specificity of the selectors.

See the cascade for more details.

Answer 2

Seems like PasswordReset has the internal CSS much earlier in the code (line 19) than SignIn (line 621). From that i assume that the external stylesheet is referenced somewhere between those positions, which produces a different order of rules (with the later ones overwriting preceding ones).

Move the internal CSS in PasswordReset further down, below the line that references the external stylesheet, this should fix it.