Fatal编程技术网
  • css/
  • 使用@import覆盖css样式无效

使用@import覆盖css样式无效

css import

使用@import覆盖css样式无效,css,import,overriding,Css,Import,Overriding,我见过一些关于用@import覆盖样式的类似问题，人们建议将@import放在底部，但这在这里似乎不起作用 --- index.html --- <head> <link rel="stylesheet" href="style.css" /> </head> <body> This text should be green. </body> --- style.css --- body {color: red;} @import u

我见过一些关于用@import覆盖样式的类似问题，人们建议将@import放在底部，但这在这里似乎不起作用

--- index.html ---
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
This text should be green.
</body>

--- style.css ---
body {color: red;}
@import url('style-override.css');

--- style-override.css ---
body {color: green;}

——index.html---
这个文本应该是绿色的。
---style.css---
正文{颜色：红色；}
@导入url（'style-override.css'）；
---style-override.css---
正文{颜色：绿色；}
上面的示例将输出红色文本，而预期输出绿色

  • 在head中的style.css之后声明style-override.css可以解决这个问题，但是我想在css文件中使用@import

  • 添加！重要提示：style-override.css中的也会得到预期的结果，但这不是它应该工作的方式

有人能解释一下吗？

这不起作用，因为在样式表中声明的任何导入规则都必须优先于其他规则-否则，…好吧，它不起作用；）

因此，您应该在style.css样式表中包含以下内容：

@import url('style-override.css');  
body {color: red;}

@import
规则必须位于顶部。这是政府所说的：

任何@import规则都必须在样式表中的所有其他at规则和样式规则之前（除了@charset，如果存在@charset，它必须是样式表中的第一项），否则@import规则无效

好的，即使@import在底部声明，我想它也会首先执行。实际上我只是在一个网站上读到的。看来是在头里面声明css还是添加！重要的是唯一的方法。谢谢。哦，是的，很明显。我甚至没想过。导入的规则仍然被覆盖，因为在本例中，
body{color:red；}
位于后面。