用自定義CSS覆蓋默認引導CSS只適用於！重要規則

基本上我已經解決了我的問題，但我想明白爲什麼我需要做到這一點。因此，我創建了一個簡單的例子，可在https://jsfiddle.net/herbert_hinterberger/9x22u934/用自定義CSS覆蓋默認引導CSS只適用於！重要規則

現在我要問，爲什麼我需要使用內部

.navbar-brand { 
    color: #eae8e8 !important; 
}

的！重要的規則改變.navbar品牌顏色？據我所知，自定義CSS應該覆蓋引導默認的CSS規則。但是由於任何原因，如果我不使用！important規則，引導程序默認的CSS規則應用於自定義CSS規則之前。見

enter image description here

可有人請解釋爲什麼我需要在這裏使用！重要的規則？

最好的問候，赫伯特

來源

2015-06-17 HH.

只需在引導.css文件後包含您的css文件，然後無需輸入！重要 –

@ user3756181：謝謝。我已經這樣做了，除了.navbar品牌之外，它運作良好。同樣在jsfiddle的例子中，你可以看到其他自定義CSS規則很好地應用，沒有！重要。只有.navbar品牌因任何原因需要！重要規則。 –

您不必每次都使用了!important。

規則是，無論css後來是什麼時候採取。所以，如果你有

在 red.css
.aClass { color:red; }

和

在 blue.css

.aClass { 
    color:blue; 
}

，
你包括blue.css後紅.css，文本aClass將爲藍色。

當您想要一條規則覆蓋其他所有條件時，您只能使用!important。

編輯：在OP的評論之後，這個問題的實際答案是這樣的。

在bootstrap.css文件中，我們有這樣的事：

.navbar-default .navbar-brand { 
    color: #hashtag; 
}

因此

，當你這樣做：

.navbar-brand { 
    color: #newHashtag; 
}

它不會改變由.navbar-default援引.navbar-brand顏色（你通過您的HTML中的.navbar-default使用此類）。這裏，.navbar-brand是.navbar-default的後裔。但是，當您輸入!important時，它會告知所有.navbar-brand s改變顏色。

所以，如果你想改變你的.navbar-brand的顏色，你可以試試：

.navbar-default .navbar-brand { 
    color: #newHashtag; 
}

有關詳細信息，在後代選擇組合程序在CSS讀了。

來源

2015-06-17 05:58:36 Ranveer

感謝您的解釋。這也很好，除了.navbar品牌。同樣在jsfiddle的例子中，你可以看到「稍後」（自定義）的CSS規則應用得很好，沒有！重要。只是。navbar品牌因任何原因需要！重要規則。 –

@HH。請看看最新的答案是否可以解釋它。感謝你，我今天也學到了新的東西：D – Ranveer

完美。您瞭解了這一點，並感謝您提供更多信息。 –

當你想用自己的代碼覆蓋引導CSS時，你需要在引導後包含你的自定義CSS。

<head> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/custom.css"> 
</head>

來源

2015-06-17 05:58:53 Peter

謝謝。我已經這樣做了，除了.navbar品牌之外，它運作良好。同樣在jsfiddle的例子中，你可以看到其他自定義CSS規則很好地應用，沒有！重要。只有.navbar品牌因任何原因需要！重要規則。 –

這是因爲CSS選擇引導使用「.navbar頭.navbar品牌」比你「.navbar品牌」更專一看到這個http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ 和嘗試這個

.navbar-header .navbar-brand { 
    color: #eae8e8; 
}

來源

2015-06-17 06:44:50 Vishal

謝謝。你明白了。 –

這裏是你的問題的最好解釋

案例：1

<!-- HTML --> 
<div class="blue box"></div> 

/*CSS*/ 
div { 
    height: 200px; 
    width: 200px; 
} 

/*The Battle*/ 
.blue { 
    background-color: blue; 
} 

.box { 
    background-color: red; 
}

在戰鬥中如何獲勝？顯然最後一個即

.box { 
     background-color: red; 
    }

背景顏色紅色適用於div的

其他Anwsers解釋這種情況下，bootstrap.css後編寫自定義的CSS文件，它覆蓋引導樣式

CASE：2

ID與類

<!-- HTML --> 
<div class="box" id="box"></div> 
    /*CSS*/ 
div { 
    height: 200px; 
    width: 200px; 
} 

/*The Battle*/ 
#box { 
    background-color: blue; 
} 

.box { 
    background-color: red; 
}

如何贏得？顯然ID贏，1D是根據特異性元素

成績的規則根據特異性

內嵌式= 1000點（用CSS具體決定）
ID是值得宣佈爲獲勝者100點。
班級價值10分。
元素值得1分。

例子：

#content .sidebar .module li a{}

分數是：

#content =100; .sidebar, .module = 10 +10; li, a = 1+1

總計：122

如果我們在前面加一個ID下面我們可以覆蓋上述的風格，因爲下面提到的風格的分數是222

#main-container #content .sidebar .module li a{}

來源

2015-06-17 07:00:58 PavanAsTechie

感謝您的解釋。我學到了一些新東西。但實際上，Ranveer的評論是正確的答案。 –

用自定義CSS覆蓋默認引導CSS只適用於！重要規則

回答

相關問題