Question

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

Answer 1

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

<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 reset。

<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。

Answer 2

@import第一个结尾处的第二个样式表。

您感到困惑!important和@import

Answer 3

如果您的第二个样式表使用相同的选择器，那么它应该覆盖第一个没有任何问题。

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

唯一的例外是第一个样式被指定为!important。在这种情况下，覆盖它要困难得多。甚至将另一种样式指定为!important可能并不总是有效（我已经看到它在某些浏览器中工作但在其他浏览器中不起作用的情况）。

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

Answer 4

这个解决方案非常适合我。

制作main.css的副本并将其重命名为style.css。在main.css中删除所有和过去：

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

多数人。

Answer 5

您还可以使用更具体的班级名称 - 例如，如果您想要更改

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

关于新css使用

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

请记住，过度合格的选择者不是最好的主意;）

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

5 个答案: