logo标签列表

CSS @import 是如何工作的？

htmlcss
3
假设我在CSS中定义了一个类，类名在3个CSS文件中被重复定义...
在Css1中，我将宽度定义为10像素
在Css2中，我将宽度定义为20像素
在Css3中，我将宽度定义为30像素
在我的HTML文件中，我调用/链接css1，在顶部导入了css2，再次导入了css3...
那么我的问题是哪个宽度将被应用，这个决定是如何做出的？
2个回答
8

最终应用的规则是：

.myclass { width: 10px; }

因为导入的样式表总是在首位(按照它们被导入的顺序)，然后被导入的样式表中的规则会被后面的样式表覆盖，所以同等优先级规则的级联顺序为：
  1. css3.css
  2. css2.css (覆盖导入的 css3.css 中的规则)
  3. css1.css (覆盖导入的 css2.css 中的规则)
"编译"后的CSS如下，更清晰地展示了这些规则的级联顺序：
.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 */
4
除了涉及额外的HTTP请求和缓存之外，@import与将导入文件的内容放置在导入文件中的@指令出现的位置相同。然后，cascade规则（包括特异性和源顺序）按照正常情况应用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接