css中为什么要把@import放在样式表的最前面?
发布网友
发布时间：2022-05-13 03:40
共3个回答
懂视网
时间：2022-05-13 08:01
为什么在CSS中不要再使用@import
热心网友
时间：2022-05-13 05:09
W3C的CSS2.1标准中，对@import作了以下规定：
In CSS 2.1, any @import rules must precede all other rules (except the @charset rule,if present).
在CSS2.1中，任何@import命令必须放在所有其它语句之前（除了用到@charset时）。
而在CSS3标准中，则是这样规定：
Any ‘@import’ rules must follow all ‘@charset’ rules and precede all other at-rules and rule sets in a style sheet.
在样式表中，任何@import命令必须紧跟在@charset命令之后（如果有的话），放在其它@命令和样式语句之前。
还有，@import命令放在注释之后同样生效。你不需要知道为什么，只要记住如果不这样做@import就会失效就行了。假如你一定要追究为什么要做这样的硬性规定，我认为主要出于这样的考虑：
<p id="intro" class="frame head">I'm just a <p> element used test specificity of selectors. So leave me alone!</p>
p#intro { font: italic 1em Candara, Arial, sans-serif; }
p.frame { font: bold 3em Arial, Helvetica, sans-serif; }
p { font: italic 2em Georgia, serif; }
你认为页面最终会使用哪条规则的font样式？是第一条p#intro。这里涉及到一个优先级(specificity)的问题：#id > .class > element(标签名)。所以即便p{font}样式出现在p#intro{font}和p.frame{}之后，最终被应用的还是p#intro{font}。而容易导致问题的是下一种情况：
p.head { font: italic 1em Candara, Arial, sans-serif; }
p.frame { font: bold 3em Arial, Helvetica, sans-serif; }
这次你认为会使用哪条font样式？是第二条p.frame。这里涉及到cascading的问题。p.head的优先级和p.frame的优先级相同，但p.frame写在p.head之后，按规则p.frame的font样式会覆盖p.head的font样式。
在这种情况下，再允许把@import放在一堆样式当中，到底@import引入的样式表中有没有会覆盖当前样式表的条目，诸如此类的判断会更加困难。实际上，即便CSS标准里没有作这样的规定，程序员也还是会这样做，因为这样可以减少很多不必要的麻烦。
参考资料：http://www.w3.org/TR/CSS21/cascade.html#at-import
热心网友
时间：2022-05-13 06:27
