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

14

我在主样式表文件中使用@import导入了另一个样式表。我希望在@import样式表中所做的更改能够覆盖主样式表。这是否可能?


2
将@import放在主样式表之后,你就没问题了。 - Pekka
1
刚试了一下,现在它不再加载了。 - Kenshi
5个回答

12
如果你的目标是通过导入另一个样式表来覆盖样式,你应该使用优先顺序。
<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,因为样式已被覆盖。

尽可能避免使用!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> 

请查看http://meyerweb.com/eric/tools/css/reset/上的CSS重置样式,并将其添加到reset.css文件中。


3
将第二个样式表@import放在第一个样式表的末尾。
你混淆了!important@import

1
尝试将@import添加到末尾,但现在CSS无法加载。我不想使用!important,因为我必须对每个要更改的内容都这样做,肯定有更简单的方法。 - Kenshi

2
这个解决方案对我非常有效。
将您的main.css复制一份并将其重命名为style.css。 在main.css中删除所有内容并粘贴:
@import url("style.css");
@import url("style-override.css");

这是全部内容。


1

如果您的第二个样式表使用相同的选择器,则应该可以在没有任何问题的情况下覆盖第一个。

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

这种情况唯一的例外是如果第一个样式被指定为!important。在这种情况下,很难覆盖它。即使将另一个样式指定为!important,也可能无法始终起作用(我曾看到某些浏览器中可以使用,但在其他浏览器中不行)。

因此,如果之前的样式表使用了!important,那么您可能会遇到覆盖它的问题。但如果没有,那么就应该相当简单。


0
您还可以使用更具体的类名——例如,如果您想要更改...
div#sample {
max-width: 75%;
}

关于新的 CSS 使用

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

请记住,过度合格的选择器并不是最好的选择;)


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接