如何用外部自定義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樣式？

回答

相關問題