5

我目前正在使用 Bootstrap，对于我的网站，我想覆盖它附带的某些默认设置。许多 Bootstrap 规则嵌套得非常深，因此通常优先于我可能定义的任何内容。

在我的覆盖 css 文件中，我有比拍打更好的选择吗

!important

在每条规则上，还是现在每个人都是这样处理的？

4

6 回答 6

9

FWIW, this works for me.

  • If you aren't already using LESS, take some time to figure it out, it will save you heaps of time and makes it easy to keep everything organised http://lesscss.org. You will be well rewarded ;)

  • Instead of editing the original Bootstrap LESS files and losing everything on the next Bootstrap update, create a new theme-css.less file and perhaps a theme.variables.less file and save them in the same directory as your Bootstrap LESS files

  • Edit bootstrap.less so that your new files are compiled correctly,

    ..

    // 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

    ..

  • Use the Bootstrap customise page to located the names of the variables that govern much of the the CSS which you may wish to customise. Change these as req'd and add to your theme.variables.less file

  • Use the LESS nested rules as per http://lesscss.org/ . <== this is important. It hugely simplifies what would otherwise be complex CSS

If you are new to LESS I realise that this isn't a simple 5 minute fix, but once you get it setup and start using the nested rules your CSS will be beautifully simple and easy to maintain.

UPDATE Jun 2015
The above technique is a bit dated now. Still works but Jake suggested a change which I like and it simplifies long-term maintenance.

Instead of editing the main bootstrap.less file:

  • create a new theme.less file

  • import bootrap.less and your custom changes, e.g.:

    @import "path-to/bootstrap.less;
    @import "path-to/custom.less;

  • compile theme.less

Doing it this way means there's less chance that your custom changes could be lost if you update your bootstrap.less file

于 2013-02-21T22:15:49.633 回答
4

!important是最后的手段，理想情况下不应该使用。如果你想覆盖 CSS，那么尊重 CSS 级联规则：更“具体”的规则总是胜过不太“具体”的规则。例如

<div id="someid">Howdy</div>


div { 
    color: red;
}

div#someid {
    color: blue;
}

使文本变为蓝色，即使两者都指向同一个元素，因为 #someid 使第二条规则更加具体。

于 2013-02-21T21:32:49.167 回答
2

这就是 CSS 评分对选择器的作用。

内联样式胜过 CSS 中的所有内容。例如。<p style="margin:0;">将覆盖您的 CSS 文件中的所有内容。

ID计1000分：#sub-head、#page-wrapper类计100分Z：.sub-head、.page-wrapper 元素计10分：a、p、div、ul、li 伪选择器计1 : :hover, :first-child, :last-child

哪个选择器具有最高的样式点数将在页面上呈现。

!important 是另一张王牌，应该很少使用。例如，我喜欢用它来为特殊文本或边距着色。

这是一个很好的链接，可以更详细地解释它。它非常简单。

关联

于 2013-02-21T22:02:46.967 回答
0

我对此的回答。我在引导样式表之后添加了一个自定义样式表，然后一切正常。

（具有自定义引导主题的 wordpress 站点） - 在这种情况下，在引导样式表之后将样式表排入队列后问题已修复

于 2016-03-11T03:53:36.877 回答
0

我认为最好的方法是基于html 文档头部的链接 css 文件的顺序。很好的解释在这里：https ://bootstrapbay.com/blog/customize-bootstrap/

其中有趣的部分

我也在用 !important 写它的时候我一直在想这是什么奇怪的方式：D

于 2015-09-28T12:52:39.460 回答
0

您应该做的最简单也是第一件事是检查 html 文件头部中样式表链接的顺序。

首先链接到引导 CSS，然后在下一行链接到您的 style.css（或类似）文件。

如果您颠倒了这个顺序，您可能无法覆盖某些样式元素。

于 2017-12-07T18:14:51.873 回答