Question

我希望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">

Answer 1

没有这样的魔力。 CSS有自己的原则，例如级联，你不能将它们关掉。

您可以在引用css.css之后将引用放在bootstrap.min.css，但这只是解决CSS规则应用方式的一个因素。添加!important（通常是错误设计的症状）只是另一个因素：如果其选择器具有更高的特异性，则早期文件中的!important规则可能会覆盖您的!important规则。

要覆盖CSS规则，您需要分析您希望覆盖的规则，并按级联原则设置“获胜”的规则。

Answer 2

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

Answer 3

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

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

后来包含了Bootstrap，它将覆盖css.css中的属性。

希望有所帮助。

Answer 4

我只能举个例子。

让我们说Bootstrap.css有以下内容 .rules #world {border:0px;} [特异性110]

和css.css具有以下内容 div #world{border:20px;} [特异性101]

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

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

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

你总是可以查阅这篇永不过时的文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 5

我认为你可以做的一件事就是在css.css中只包含css.css和@import“css / bootstrap.min.css”所以你的代码将是这样的

在html中

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

和在css.css

中

@import "css/bootstrap.min.css"

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

使用此技巧，您可以覆盖引导样式，而不会显示任何令人头疼的结果

Answer 6

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

ex：display：inline！important;

Answer 7

请参阅列表中的最后一项，该列表将始终覆盖以前的样式表

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

实施例

<强> Style1.css

 #main{ width:1000px;}

<强> Style2.css

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

<强> HTML

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

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

Answer 8

如果您正在使用bootstrap，那么本文可能很有用：

https://stackoverflow.com/a/12819825/1064416

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

8 个答案: