我希望css.css覆盖其中的所有类、标签和ID ，bootstrap.min.css 而不重复bootstrap.min.css.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/css.css" rel="stylesheet">
问问题
52669 次
7 回答
12
没有这样的魔法。CSS有它自己的原理，比如级联，你不能把它们关掉。
您可以在对 的引用css.css之后放置对 的引用bootstrap.min.css，但这只是解决如何应用 CSS 规则的过程中的一个因素。添加!important，这通常是错误设计的症状，只是另一个因素：!important早期文件中的规则可能会覆盖您的!important规则，如果其选择器具有更高的特异性。
要覆盖 CSS 规则，您需要分析您希望覆盖的规则并通过级联原则设置“获胜”的规则。
于 2012-10-23T11:43:53.300 回答
11
很简单，最后包含更重要的 CSS 文件。
于 2012-10-23T11:32:43.087 回答
2
包含样式表时，它会覆盖之前包含的样式表的所有声明。如果您将包含更改为：
<link href="css/css.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
Bootstrap 稍后会包含在内，并将覆盖 css.css 中的属性。
希望有帮助。
于 2012-10-23T11:32:41.223 回答
2
我只能给你举个例子。
假设 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 在做什么。
您可以随时查看这篇永不过时的精彩文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
于 2012-10-23T11:43:43.330 回答
2
我认为你可以做的一件事是在 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;}
使用这个技巧，您可以覆盖引导样式，而不会显示任何令人头疼的结果
于 2012-10-23T12:11:57.150 回答
0
如果您无法更改文件，并且 css 文件的调用顺序不起作用，您始终可以使用！important，但这会花费很多时间，因为您需要在 css 的每一行添加它。
例如：显示：内联！重要；
于 2012-10-23T11:33:50.350 回答
0
将其引用到列表中的最后一项，该列表将始终覆盖以前的样式表
下面将强制您的页面适合 980px，因为它会覆盖以前的样式表属性
例子
样式1.css
#main{ width:1000px;}
样式2.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>
于 2012-10-23T11:43:55.250 回答