即使自定義樣式表包含第二個，Boostrap樣式將重寫自定義樣式？

我隨時修改引導通過包括引導一個經過我的自定義樣式表，在這種特殊情況下，像這樣：即使自定義樣式表包含第二個，Boostrap樣式將重寫自定義樣式？

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

<link href="css/mainstyle.css" rel="stylesheet">

我有一個列表中的網站上，一些人的元素也有類advanced-only。

列表中的元素有引導的風格：

.nav > li { 
    position: relative; 
    display: block; 
}

而且advanced-only類在我的自定義樣式表有：

.advanced-only { 
    display: none; 
}

還有其他的風格，如顏色和邊框，但他們都沒有這裏有關。如您所見，頁面加載時應隱藏advanced-only元素，但會顯示它們。當我檢查其中一個元素時，我發現樣式被刪除，Bootstrap的.nav li樣式處於活動狀態。當我從那裏停用Bootstrap時，那麼自定義激活一個，一切都很好。

此外，當我做

.advanced-only { 
    display: none !important; 
}

它隱藏它喜歡它應該。但是，這會干擾一堆Javascript代碼（例如，show()和hide()無法與!important元素正常工作），所以我想了解爲什麼Bootstrap重寫自定義樣式以及我可以對此做些什麼。

的HTML看起來像這樣：

<ul class="nav nav-sidebar"> 
    <li> 
     <a>Pending Actions</a> 
    </li> 
    <li class="advanced-only"> 
     <a>Hidden stuff</a> 
    </li> 
</ul>

來源

2015-08-03 jovan

你需要在CSS中使用你的'selector'。更具體的'selector'總是優先。 – Jay

這是因爲您的選擇器的specificity低於引導選擇器。強烈建議你閱讀。

該specificity是基於許多因素計算，而不僅僅是定義的順序。

例如，這個選擇.nav > li有一個attribute selector和tag selector，而您的規則.advanced-only只有一個attribute selector。所以你的規則不會產生影響。給定製樣式時儘量讓選擇器更多specific。

來源

2015-08-03 13:38:21 Joy

這是因爲自舉的造型比你自定義的造型更具體。

要解決這個問題，你需要添加一個更具體的選擇，e.g：

nav .advanced-only { 
    display: none; 
}

有關CSS特異性多看書退房this link。

來源

2015-08-03 13:22:25

即使自定義樣式表包含第二個，Boostrap樣式將重寫自定義樣式？

回答

相關問題