When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to a separate style sheet.
I know each style sheet download once, even if they refer to each other! I'm curious about this sentence: user agents must process (or act as though they do) each link as though the link were to a separate style sheet.!
What did UA do to process style sheet was imported more than once, and what does the separate style sheet mean?
notice: I'm not ask about performance!
CodePudding user response：
To an extent, this is a catch-all, to cover all behaviour where multiple links occur. But to give one example, suppose you have
File a.css
@import "b.css";
@import "c.css";
@import "d.css";
File b.css
h1 { color: red; }
File c.css
h1 { color: blue; }
File d.css
@import "b.css";
Then what the quoted text is saying is that the browser, on encountering d.css, can't simply act as if "I've already imported b.css, I'll just ignore it this time", because if it did all <h1> elements would, using the latter-specified-rule-wins requirement, have blue color.
Instead, it must reapply all the rules of the b.css stylesheet again, so that the latter rule is the one from b.css, and the <h1>s' color are red.