我目前在使用Bootstrap,对于我的网站,我想覆盖它所带的某些默认设置。许多Bootstrap规则的嵌套深度很大,因此通常会优先于我定义的任何内容。
在我的覆盖CSS文件中,除了“!important”之外,我是否有更好的选择?
!important
每个规则都这么处理,还是现在大家都是这样处理的吗?
我目前在使用Bootstrap,对于我的网站,我想覆盖它所带的某些默认设置。许多Bootstrap规则的嵌套深度很大,因此通常会优先于我定义的任何内容。
在我的覆盖CSS文件中,除了“!important”之外,我是否有更好的选择?
!important
每个规则都这么处理,还是现在大家都是这样处理的吗?
就我个人经验而言,这种方法对我很有效。
如果你还没有使用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
!important
是最后一招,理想情况下不应使用。如果您想覆盖CSS,则应遵守CSS级联规则:更“具体”的规则总是优先于较少“具体”的规则。例如:
<div id="someid">Howdy</div>
div {
color: red;
}
div#someid {
color: blue;
}
<td style="color: red">
将覆盖 td { color: blue; }
。当然,除非你在CSS中滥用了 !important,否则所有的投注都无效。 - Marc B内联样式是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是另一种最强的卡牌,应该很少使用。例如,我喜欢用它来为特殊文本或边距着色。
这是一个可以更详细解释的好链接。非常简单易懂。
我认为基于HTML文档头部链接CSS文件的顺序是最好的方式。这里有一个很好的解释:https://bootstrapbay.com/blog/customize-bootstrap/
有趣的一点
我也使用了 !important,每次写的时候都在想这是什么奇怪的方式 :D
我的回答是:我在 Bootstrap 样式表之后添加了自定义样式表,然后一切都正常了。
(这是一个使用自定义 Bootstrap 主题的 WordPress 网站)- 在这种情况下,我将我的样式表排队到 Bootstrap 样式表之后,问题就解决了。
最简单也是你应该做的第一件事情是检查你的HTML文件头部中样式表链接的顺序。
首先链接Bootstrap CSS,然后在下一行链接你的style.css(或类似的)文件。
如果你颠倒了这个顺序,你可能会遇到覆盖某些样式元素的问题。
@import "bootstrap.less"; @brand-primary: red;
- Jacob Hulse