我目前在使用Bootstrap，对于我的网站，我想覆盖它所带的某些默认设置。许多Bootstrap规则的嵌套深度很大，因此通常会优先于我定义的任何内容。
在我的覆盖CSS文件中，除了“!important”之外，我是否有更好的选择？
!important
每个规则都这么处理，还是现在大家都是这样处理的吗？
6个回答
9
就我个人经验而言，这种方法对我很有效。
如果你还没有使用LESS，请花些时间去学习一下。它可以节省大量时间，并且使所有内容易于组织和管理。http://lesscss.org。你会得到很好的回报；）
不要编辑原始的Bootstrap LESS文件，否则下次Bootstrap更新时会丢失一切。相反，创建一个新的theme-css.less文件和一个theme.variables.less文件，并将它们保存在与Bootstrap LESS文件相同的目录中。
编辑bootstrap.less文件以使您的新文件正确编译：
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
@import "theme-variables.less"; // <==== Your custom CSS variables
// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";
// Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less";
@import "theme-css.less"; // <==== Your custom CSS使用Bootstrap定制页面找到控制大部分CSS的变量名称，您可以根据需要更改这些变量，并将它们添加到您的theme.variables.less文件中。
使用嵌套规则，如http://lesscss.org/。<== 这很重要。否则CSS会变得复杂。
如果你是LESS新手，我知道这不是一个简单的五分钟修复，但是一旦你设置好并开始使用嵌套规则，你的CSS就会变得非常简单易于维护。
更新(2015年6月)
以上技术现在有点过时。仍然有效，但Jake建议了一种变更，我很喜欢它，它简化了长期的维护。
创建一个新的theme.less文件
导入bootrap.less和您的自定义更改，例如：
@import "path-to/bootstrap.less;
@import "path-to/custom.less;编译theme.less
- David Taiaroa
5
4
!important 是最后一招，理想情况下不应使用。如果您想覆盖CSS，则应遵守CSS级联规则：更“具体”的规则总是优先于较少“具体”的规则。例如：
<div id="someid">Howdy</div>
div {
color: red;
}
div#someid {
color: blue;
}
即使两个规则都指向同一个元素，但是由于 #someid 让第二条规则更具体化，因此它会使文本变成蓝色。
- Marc B
2
我理解特定性规则，但使用ID似乎不是长期可扩展的解决方案。例如，在将CSS规则应用于页面的程序生成部分时（例如从后端填充一个表格），就必须使用!important，我想知道是否有更好的方法。 - Alexandr Kurilin
1如果你正在生成HTML，你可以始终生成内联样式，这将始终是“最具体”的。例如，
<td style="color: red"> 将覆盖 td { color: blue; }。当然，除非你在CSS中滥用了 !important，否则所有的投注都无效。 - Marc B2
这是CSS选择器的计分方式：
内联样式是CSS中最强的。
例如：<p style="margin:0;">将覆盖CSS文件中的所有内容。
ID按1000分计算：#sub-head、#page-wrapper。 类按100分计算：.sub-head、.page-wrapper。 元素按10分计算：a、p、div、ul、li。 伪选择器按1分计算：:hover、:first-child、:last-child。
拥有最高分数的选择器将在页面上呈现出样式。
!important是另一种最强的卡牌，应该很少使用。例如，我喜欢用它来为特殊文本或边距着色。
这是一个可以更详细解释的好链接。非常简单易懂。
- Michael Merrill
0
我认为基于HTML文档头部链接CSS文件的顺序是最好的方式。这里有一个很好的解释：https://bootstrapbay.com/blog/customize-bootstrap/
有趣的一点
我也使用了 !important，每次写的时候都在想这是什么奇怪的方式 :D
- Ales
0
我的回答是：我在 Bootstrap 样式表之后添加了自定义样式表，然后一切都正常了。
（这是一个使用自定义 Bootstrap 主题的 WordPress 网站）- 在这种情况下，我将我的样式表排队到 Bootstrap 样式表之后，问题就解决了。
- BegYourPardon
0
最简单也是你应该做的第一件事情是检查你的HTML文件头部中样式表链接的顺序。
首先链接Bootstrap CSS，然后在下一行链接你的style.css（或类似的）文件。
如果你颠倒了这个顺序，你可能会遇到覆盖某些样式元素的问题。
- wla312
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
@import "bootstrap.less"; @brand-primary: red;- Jacob Hulse