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

【问题标题】：How do I get my @import stylesheet to override the main stylesheet?如何让我的 @import 样式表覆盖主样式表？
【发布时间】：2022-01-24 12:33:10
【问题描述】：

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

【问题讨论】：

在主样式表后面加上@import 应该没问题
刚刚试了，现在加载不出来了

标签： css

【解决方案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，因为样式已被覆盖。

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

【讨论】：

【解决方案2】：

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

您混淆了!important 和@import

【讨论】：

尝试在末尾添加@import，它不再加载css。我不想使用 !important，因为我必须这样做，因为我想更改的所有内容都必须有更简单的方法。

【解决方案3】：

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

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

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

就是这样。

【讨论】：

【解决方案4】：

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

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

唯一的例外是第一个样式被指定为!important。在这种情况下，要覆盖它要困难得多。即使将另一种样式指定为 !important 也可能并不总是有效（我见过它在某些浏览器中有效但在其他浏览器中无效的情况）。

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

【讨论】：

【解决方案5】：

您还可以使用更具体的类名 - 例如，如果您想更改

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

关于新的 CSS 使用

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

请记住，过度限定的选择器不是最好的主意 ;)

【讨论】：