Html 如何使CSS文件比另一个CSS文件更重要？

我希望

css.css

中的所有类、标记和ID都覆盖在

bootstrap.min.css

上，而不重复

bootstrap.min.css

中的类、标记和ID

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">

---

当您包含样式表时，它将覆盖之前包含的样式表的所有声明。如果您将您的包含更改为：

<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

引导稍后包括在内，并将覆盖css.css中的属性

---

希望对您有所帮助。

简单，最后包含更重要的CSS文件。

如果您无法更改文件，并且CSS文件的调用顺序不起作用，您可以随时使用！重要的,， 但是这会占用很多时间，因为你需要在css的每一行中添加它

---

显示：内联！重要的

我只能给你举个例子

假设Bootstrap.css具有以下功能

.rules#world{border:0px；}

[110]

css.css具有以下特性

div#world{border:20px；}

[101]

在这种情况下，bootstrap.css将始终覆盖css.css。因此，我建议您在所有内容中添加一个容器-给这个容器一个id。让我们说“god”，然后在css中为所有样式添加前缀。god-但是，这并不是那么简单，这在很大程度上取决于您如何正确计算

#god div #world{border:20px;}

正如其他人指出的，这是一个很长的主题，所以你必须基本上知道所有引导程序对你的页面做了什么，以及css.css在做什么

---

你可以随时查阅这篇精彩的文章，它永不过时。

没有这样的魔力。CSS有自己的原理，比如级联，你不能关闭它们

您可以将对

css.css

的引用放在对

bootstrap.min.css

的引用之后，但这只是解决如何应用css规则的过程中的一个因素。添加

！重要信息

，这通常是错误设计的症状，只是另一个因素：一个

！重要信息

早期文件中的规则可能会覆盖您的

！重要信息

规则，如果其选择器具有更高的特异性

---

要覆盖CSS规则，您需要分析要覆盖的规则，并根据级联原则设置一个“赢”的规则。

引用列表中的最后一项，它将始终覆盖以前的样式表

下面将强制您的页面适合980px，因为它覆盖了以前的样式表属性

范例

Style1.css

 #main{ width:1000px;}

 #main{ width:980px;} 
      or  
 #main{ width:980px !important;} /* if needed only */

@import "css/bootstrap.min.css"

.bootstrap_class{//your style..}
.hero-unit{background: red;}

Style2.css

 #main{ width:1000px;}

 #main{ width:980px;} 
      or  
 #main{ width:980px !important;} /* if needed only */

@import "css/bootstrap.min.css"

.bootstrap_class{//your style..}
.hero-unit{background: red;}

HTML

<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<div id="main"></div>

---

我认为您可以做的一件事是，在css.css中只包含css.css和@import“css/bootstrap.min.css”，因此您的代码如下所示

在html中

<link href="css/css.css" rel="stylesheet">

---

使用此技巧，您可以覆盖引导样式，而不显示头痛的任何结果。这是什么意思？css.css将否决bootstrap.min.css，但仅适用于css.css中定义的规则。回答这个问题可能会很长，因为这是一个模糊的主题。w3网站上有一整章都是关于这一点的@完全正确。不使用

！重要信息

或重复所有内容。@alnassre你是想打开这罐蠕虫还是只是想寻找一个简单的答案？这还不够。如果在不太重要的css文件中有

div.some class{}

，则不能用

.some class{}

覆盖它，但根据HTML结构，它可能会被

p.some class{}

覆盖。它比仅仅拥有CSS文件的顺序要复杂得多。特别是因为OP说

，没有重复类、标记和ID

，所以不太清楚他想要什么，但我认为这意味着他不想使用相同的规则。@Dan，这个问题足够简单，可以得到一个简单的答案。当然，你说的是对的，但问题的标题纯粹是为了使一个文件比另一个文件更重要。@Dan，虽然我站在你这边，但我更愿意对这个问题进行投票，因为给出的答案最终不会回答根本的问题，因此不会增加太多价值。如果你注入一个页面，例如，对于jqueryload，您没有这样的控件。所以有时候并不容易，这是不够的。如果在不太重要的css文件中有

div.some class{}

，则不能用

.some class{}

覆盖它，但根据HTML结构，它可能会被

p.some class{}

覆盖。它比仅仅拥有CSS文件的顺序要复杂得多。特别是因为OP没有重复类、标记和ID，而是说

，所以他想要什么并不十分清楚，但我认为这意味着他不想使用相同的规则。是的。但有了他提供的代码，这是我能直接提供的唯一解决方案。@TobiasSpringer，那完全相反。
css.css
的顺序是正确的，@Dan所说的正是我所需要的。再加上：嗯，看起来还没有什么神奇的解决方案。@alnassre就像我说的，你无法找到一个关于这个问题的好答案，这里几乎所有的答案都是正确的，但都缺乏。我强烈建议你阅读这篇文章，尝试一下，然后在对它的工作原理有了一个想法之后，你将能够问关于这个主题的更具体的答案。“更具体”是正确的提示。我选择了
div.x
，并且在
x
a
之外的一些div上选择了
。直到我将CSS从
div.selected
切换到
div.x.selected
，这才起作用。现在，选定的
具有更高的优先级。