CSS優先與引導

我定義一個定製類重寫的顏色屬性使用自定義類導航欄品牌定製 div元素預期不工作。我瞭解到後面定義的樣式總是優先於其他樣式，因此項目名稱應該以自定義CSS中定義的藍色顯示。但不知何故，我沒有看到發生。你能看看我是否缺少任何東西。CSS優先與引導

外部CSS：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

內部CSS：

.navbar-brand-custom 
{ 
    color:blue; 
}

HTML：

<div class="container-fluid navbar navbar-default navbar-fixed-top"> 
<div class="container"> 
     <div class="navbar-header"> 
     <a class="navbar-brand navbar-brand-custom" href="#" >Project name</a> 
     </div> 
</div> 
</div>

我創建了scena里約在這裏。 '項目名稱'仍然是默認顏色，而不是藍色。 https://jsfiddle.net/u3nh21uL/

來源

2015-04-18 Tejus

包含在下bootstrap.css內部CSS文件？ –

檢查[這]（http://www.w3.org/TR/CSS21/cascade.html#cascade）瞭解級聯偏好。 –

試試這個：

.navbar-header a.navbar-brand-custom 
{ 
    color:blue; 
}

來源

2015-04-18 18:21:53 blearn

引導的造型決定了這個

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

這只是一個改善你的選擇爲增加特異性的事情

.navbar-brand.navbar-brand-custom { 
    color:blue; 
}

JSFiddle Demo

來源

2015-04-18 18:21:59

謝謝！這樣可行。但仍然想知道爲什麼它不起作用，當不那麼具體。我的意思是爲什麼外部風格仍然優先 – Tejus

似乎還有一點小問題。我已經指定了懸停風格爲藍色。這很好。然而，右擊項目名稱會導致其行爲異常。它只是後退，並假設它右鍵點擊時口述的顏色。 – Tejus

右鍵點擊？這不允許在CSS中...我不知道你在做什麼。 –

有在bootstrap.css內置的規則，具有較高的特異性：

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

要覆蓋這一點，你需要相匹配的元素，並使用兩個或多個類別的規則。你可以這樣做：

.navbar-brand-custom.navbar-brand-custom { color: blue; }

上述規則有一些已知的老版本的IE問題。如果你想避免它再嘗試其他的組合：

.navbar-default .navbar-brand-custom { color: blue; }

Updated Fiddle

來源

2015-04-18 18:33:06

CSS優先與引導

回答

相關問題