我见过一些关于用@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;}
上面的示例将输出红色 文本,而预期是绿色。
在 head 内的 style.css 之后声明 style-override.css 将解决问题,但我想在 css 文件内使用@import。
在 style-override.css 中添加 !important 也会得到预期的结果,但这不是它应该的工作方式。
谁能解释一下?
最佳答案
那是行不通的,因为在样式表内声明的任何导入规则都必须先于其他所有内容 - 否则,...好吧,它行不通 ;) 。
因此,您的 style.css 样式表中应该包含:
@import url('style-override.css');
body {color: red;}
关于css - 用@import 覆盖 css 样式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12330191/