css - 用@import 覆盖 css 样式不起作用

标签 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 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/

相关文章:

c++ - 功能覆盖不起作用

java - 为什么有时我们必须在 Android 中调用 super ?

php - config.xml 覆盖导致购物车不可见?

html - ipad 上的背景视频未修复,智能手机上的 href 链接不起作用

reactjs - 导入 4 个文件夹深的文件

jquery - enscroll 插件不适用于显示 :none element

linux - xquery 无法加载 http ://expath. org/ns/http-client

python - 函数定义后的 Import 语句——如何让它更像 pythonic?

CSS 文本消失

javascript - 滚动到下一部分