How exactly does CSS @import work?

Lets say I have defined a class in my CSS, with the class name repeated in 3 CSS files with diff definitions... In Css1, i define width as 10 px

In Css2, i define width as 20 px

And In Css3,i define width as 30 px

in m开发者_如何学编程y HTML file I call/link css1, which has an import for css2 at the top, which again imports css3..

So my question is what width will be applied and how exactly is this decision made?

The rule that is ultimately applied is

.myclass { width: 10px; }

because imported stylesheets always come first (in the order in which they're imported of course), then get overridden by whatever comes after in the stylesheet that imports them, so the order of cascade for equally-specific rules is

1. css3.css
2. css2.css (overrides the rule in imported css3.css)
3. css1.css (overrides the rule in imported css2.css)

The "compiled" CSS would look like this so it's clearer how the rules cascade:

.myclass { width: 30px; } /* From imported css3.css */
.myclass { width: 20px; } /* From imported css2.css, overrides css3.css */
.myclass { width: 10px; } /* From css1.css, overrides css2.css */

Aside from implications around extra HTTP requests and caching, @import is just like putting the contents of the imported file at the point where the @ directive appears in the importing file.

The cascade rules (including specificity and source order) then apply as normal.