如何让我的@import样式表覆盖主样式表？

我在主样式表文件中使用@import导入了另一个样式表。我希望我在@import样式表中所做的更改覆盖主样式表。这可能吗？如何让我的@import样式表覆盖主样式表？

2011-10-03 Kenshi

在主样式表后面执行@import，你应该没问题 –

刚刚试过了，现在不再载入了 – Kenshi

如果您的目标是通过导入其他样式表来覆盖样式，则应该使用优先顺序。

<head> 
    <title>Title</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <link href="style-override.css" rel="stylesheet" type="text/css" /> 
</head>

这里style.css是原始和style-override.css将包含新的自定义CSS。这些样式将覆盖style.css的样式。这意味着您将不需要使用!important，因为样式被覆盖。

避免！重要的时候你可以。

要做到@import

<style type="text/css"> 
    @import url("style.css"); 
    @import url("style-override.css"); 
</style>

另外，作为一个侧面说明，如果你宁愿从页面中移除所有样式，使用CSS复位。

<style type="text/css"> 
    @import url("style.css"); 
    @import url("reset.css"); 
    @import url("style-override.css"); 
</style>

查看CSS reset在http://meyerweb.com/eric/tools/css/reset/并将其添加到reset.css。

来源

2011-10-03 22:00:56 Kirk

这工作谢谢！ – Kenshi

@import第二个样式表在第一个末尾。

你混淆!important和@import

来源

2011-10-03 21:54:34 Eric

试图添加@i mport在最后它不再加载css。我不想使用！重要的，因为我必须为我想改变的一切做到这一点，必须有一个更简单的方法。 – Kenshi

如果你的第二个样式使用相同的选择，那么就应该重写没有任何问题的第一位。

CSS有一个非常严格的优先顺序来确定哪一个应该被使用，但是如果其他所有条件都相等并且两个样式具有完全相同的优先级，那么它将使用最后指定的那个。这允许您稍后通过重复相同的选择器来覆盖样式。

唯一的例外是，如果第一个样式被指定为!important。在这种情况下，重写它就困难得多。甚至指定!important的另一种风格可能并不总是有效（我曾见过它在某些浏览器中运行的情况，但在其他浏览器中运行的情况并非如此）。

所以，如果以前的样式表使用!important那么你可能有问题覆盖它。但是，如果不是，它应该相当简单。

来源

2011-10-03 22:00:29 Spudley

该解决方案对我来说非常合适。

复制main.css并将其重命名为style.css。在main.css的删除所有与过去：

@import url("style.css"); 
@import url("style-override.css");

这就是所有。

来源

2015-07-31 09:57:04

您还可以使用更具体的类名 - 如果你想在新的CSS使用

body div#sample { 
max-width: 75%; 
}

改变

div#sample { 
max-width: 75%; 
}

只要记住，这条件太好选择不是最好的例子主意;）

来源

2016-09-06 09:42:25

如何让我的@import样式表覆盖主样式表？

回答

相关问题