问题
I have seen:
- CSS 2, precedence of stylesheets imported using link element
- In which order do CSS stylesheets override?
- stylesheet - Can one CSS file take priority over another CSS file?
They all seem to say that, for the same selector occurring multiple times, the last one wins. However that is not what happens for me. So given that "Aqua.css" has:
body {color:aqua;}
And "Red.css" has:
body {color:red;}
Then using the following:
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
The last one, Yellow, is used, as the other answers say. If I change that however to:
<style type="text/css">
body {color: lime;}
body {color: yellow;}
</style>
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
Then Aqua is used, not the last one, Red. See Precedence of CSS rules Sample 2. The body color is Aqua yet Aqua.css is before Red.css. All the answers I find say that the body color would be Red.
Whenever I have multiple links to css stylesheets and the only difference among them is the color of something (element or class or whatever) then the first stylesheet is used, not the last, yet that seems to not be what everything I read says should happen. I have tried Edge, Chrome and IE; I notice no relevant difference among them.
So I have the following two questions:
- Am I correct that the behavior I am seeing (the first link tag is used instead of the last) is different from the other answers?
- If so, then why?
I apologize if I should have posted an answer to one of the other threads, but I think it is cleaner to create a new question.
The reason I am asking is that I am trying to create a dynamic stylesheet system so understanding the precedence is more important, it is less effective to just try something to see what works than in normal circumstances. I will attempt to interpret the specifications but to the extent that has been in other answers, I want to understand what has been provided here in other threads.
回答1:
Disclaimer: My old answer and line of thinking was completely wrong, so I've deleted it, and am posting this as a replacement so as not to be confused with any of the prior discussion.
When you give a <link> element a title attribute, you are defining it as an alternative style sheet set.
<link rel="stylesheet" type="text/css" href="Aqua.css" title="Aqua"/>
^^^^^^^^^^^^
<link rel="stylesheet" type="text/css" href="Red.css" title="Red"/>
^^^^^^^^^^^
The precedence of styles was a red herring. The Red.css styles were never being applied at all, because that style sheet set was not currently active.
Per the spec:
Also, the title attribute has special semantics on this element: Title of the link; alternative style sheet set name.
Also worth reading: "CSS: alternative style sheets":
A document doesn't need to have a single style sheet. You can give it a default style and any number of alternatives for the reader to choose from. This page, for example, has as alternatives all the W3C Core Styles, plus two style sheets found elsewhere on the Web (author: David Baron).
How the reader can select the alternatives depends on the browser. Not all browsers yet offer a menu for it, but many do. E.g., in Opera, Internet Explorer and Firefox you can find the styles under the “View” menu. As of 2012, Chrome requires an extension (e.g., Decklin Foster's Style Chooser).
You're supposed to use rel="alternative stylesheet" when defining alternative stylesheets, but this appears to be a case where the browser anticipated the behavior. Remove the title attributes, and the <link> elements return to their standard behavior as defined in the spec.
来源：https://stackoverflow.com/questions/36381157/precedence-of-css-rules