如何使用外部自定义CSS覆盖bootstrap 3样式? [英] How do you override bootstrap 3 styles with external custom CSS?

问题描述

如何使用外部自定义CSS覆盖bootstrap 3样式?

How do you override bootstrap 3 styles with external custom CSS?

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "css/styles.css" rel = "stylesheet"/>


<div class = "navbar navbar-inverse navbar-fixed-top"></div>

CSS

.navbar-inverse {
    background-color: #FF0000;
}

推荐答案

需要考虑以下几点:

• 样式表顺序-您要覆盖的样式表应排在首位.

• Stylesheet order - The stylesheet you are trying to overwrite should come first.

6.4.1级联顺序

最后，按指定的顺序排序:如果两个声明具有相同的权重，来源和特异性，则以后者为准.导入的样式表中的声明被认为早于样式表本身中的任何声明.

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

在这种情况下，这不应该成为问题.

In you case this shouldn't be an issue.

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

• 选择器特异性-在特异性(mdn ).

简短地说，您应该使用具有相同特异性的选择器(假设稍后出现，并且将覆盖初始声明)，或者使用更具体的选择器.

Put briefly, you should use a selector with the same specificity (assuming it appears later and will overwrite the initial declaration), or a selector that is more specific.

Bootstrap 3的默认样式将以下内容用作navbar的颜色:

Bootstrap 3's default styling uses the following for the navbar's color:

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

您可以尝试使用更具体的选择器:

You could try using a more specific selector:

.navbar.navbar-inverse {
    background-color: #FF0000;
}

• 样式表路径-如果所有其他方法均失败，则您的样式表路径必须错误.

• Stylesheet paths - If all else fails, your stylesheet path(s) must be wrong.

这篇关于如何使用外部自定义CSS覆盖bootstrap 3样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！