HTML - 優先於CSS樣式

我有一個加載兩個樣式表的HTML：HTML - 優先於CSS樣式

引導風格（bootstrap.css）
自定義應用風格（site.css）

我有以下代碼in bootstrap.css

.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: auto; 
}

我需要什麼inser牛逼到我site.css所以我對site.css風格爲主，而無需修改bootstrap.css：

.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    background-color: #D5D5D5 
}

來源

2016-12-05 VAAA

首先，像@luka建議你應該bootstrap.css後，裝載site.css文件。這並不總是能夠保證成功，因爲Bootstrap特有的一些規則集非常高。它出現在你的具體情況中，你不應該有任何問題。但Bootstrap的規則集有時會交織在一起，並且可能存在某些您不知道或無法找到的內容，可能會阻止您的規則集成功。

在你bootstrap.css後加載site.css不起作用，不使用!important的情況。相反，加倍您的選擇：

.modal-open.modal-open .modal.modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    background-color: #D5D5D5 
}

根據這一online tool，上述CSS特異性得分選擇是4，而引導的是2。這個技術已經100％了我多年。

來源

2016-12-05 02:02:21 zer00ne

嘗試增加!important：

.modal-open .modal { 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
    background-color: #D5D5D5 !important; 
}

來源

2016-12-05 01:42:01 bumbumpaw

而不是增加!important，你可以引導樣式表後添加自定義樣式表在您網站的<head>部分：

<link href="bootstrap.css" rel="stylesheet"> 
<link href="site.css" rel="stylesheet">

這樣，任何重複的CSS選擇器/屬性site.css將覆蓋bootstrap.css

來源

2016-12-05 01:42:18

您有幾種選擇：

如果規則是完全一樣的 - 存在的最後一條規則將接管（所以如果您首先鏈接到bootstrap.css，然後鏈接到site.css - site.css內的樣式將採用。
你可以添加!important（不是最好的選擇，但你可以做到）。
可以複製的選擇：.modal-open.modal-open .modal.modal {...}

來源

2016-12-05 01:42:41 Dekel

HTML - 優先於CSS樣式

回答

相關問題