如何用外部自定义CSS覆盖引导程序3样式？

如何用外部自定义CSS覆盖引导程序3样式？如何用外部自定义CSS覆盖引导程序3样式？

<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; 
}

来源

2014-09-04 Mariano

有一些事情要考虑：

样式表顺序 - 你试图覆盖样式应该是第一位的。

最后，排序顺序指定6.4.1 Cascading order

：如果两个声明具有相同的重量，产地和特异性，后者指定的胜利。导入样式表中的声明被认为是在样式表本身的任何声明之前。

在你的情况下，这不应该是一个问题。
```
<link href="css/bootstrap.min.css" rel="stylesheet"/> 
<link href="css/overwrite.css" rel="stylesheet"/> 
```

选择特异性 - 阅读上specificity (mdn)。

简而言之，您应该使用一个具有相同特异性的选择器（假设它稍后出现并将覆盖初始声明）或更具体的选择器。

引导3的默认样式使用的navbar的颜色如下：
```
.navbar-inverse { 
    background-color: #222; 
    border-color: #080808; 
} 
```
你可以尝试使用一个更具体的选择：
```
.navbar.navbar-inverse { 
    background-color: #FF0000; 
} 
```

样式表路径 - 如果一切都失败了，你的样式表路径必须是错误的。

来源

2014-09-04 01:11:02

-2

试试这个：

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

来源

2014-09-04 01:17:32 Rook

如何用外部自定义CSS覆盖引导程序3样式？

回答

相关问题