Question

我有一个由别人制作的html网页设计;他们在css文件中使用了@import。我会出于几个原因（主要是：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/）删除css文件中的@import，而是将其直接包含在html页面中：<link rel="stylesheet"… >

我现在的问题是：通过链接包含文件以维护当前规则验证序列的正确方法是什么

当前的@import序列，例如：

a.css
  @import b.css

b.css
  @import c.css
  @import d.css

正确的链接顺序是：

a.css
b.css
c.css
d.css

或者它是这样的：

c.css
d.css
b.css
a.css

或???

除了一个或多个导入标签外，每个文件还包含css规则。

对于记录：我不能选择将所有文件收集在一个文件中 - 不同的css文件仅用于不同的上下文和/或一起使用

Answer 1

@import规则包括所有样式，就好像它们在那个位置上一样。示例（default.css）：

@import "first.css";
@import "second.css";
@import "third.css";

body {
   color: #333333;
}

按此顺序，首先应用first.css的所有css规则，然后应用second.css，然后应用third.css。因此，如果要删除包含，只需按照导入链接并按照此顺序在html head部分中添加它们：

<head>
  <title>Whatever</title>
  <link href="first.css" rel="stylesheet" type="text/css">
  <link href="second.css" rel="stylesheet" type="text/css">
  <link href="third.css" rel="stylesheet" type="text/css">
  <link href="default.css" rel="stylesheet" type="text/css">
</head>

所以，在你的情况下，它将是：

c.css
d.css
b.css
a.css

Answer 2

我相信它们将按照它们呈现给浏览器的顺序进行解析，在链接样式表中导入规则必须在文件中的任何其他规则之前或错误发生之后再次出现我假设它们按顺序解析

a.css
b.css
c.css
d.css

如果您发现这不是真的，请回复。

从css文件中替换@import时，正确的链接顺序是什么

2 个答案: