如何替換bootstrap中的樣式

更改bootstrap的預設樣式

很久沒用bootstrap，對與依自己的需求修改樣式都忘了。

一上來就新增了新的class類，重寫css樣式讓其覆寫原有的樣式，實際上不起作用。因為沒考慮的選擇器的優先權。面試的時候會問到一些這個問題，一直不能從理論和實務連結起來。

我的解決方案是透過子選擇器來增加權重，看別人也有用id的，我不太喜歡添加id的選擇器。

回憶一波選擇器以及其優先順序。

一、css選擇器

1.標籤選擇器(如：body,div,p,ul,li)

# 2.類別選擇器(如：class)

3.ID選擇器(如：id)

4.全域選擇器(如：*號)

5.組合選擇器(如：.head .head_logo,注意兩個選擇器用空白鍵分開)

6.後代選擇器(如：#head .nav ul li 從父集到子孫集的選擇器)

7.群組選擇器div,span,img {color:Red} 即具有相同樣式的標籤分組顯示

#8.繼承選擇器(如：div p,注意兩選擇器用空白鍵分開)

9.偽類選擇器(如：就是連結樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。)

10.字串匹配的屬性選擇符(^ $ *三種，分別對應開始、結尾、包含)

11.子選擇器(如：div>p ,帶大於號>)

12.CSS 相鄰兄弟選擇器器(如：h1 p,加號)

相關推薦：《bootstrap入門教學》

二、優先權

當在一個樣式宣告上使用!important 規則時，該樣式宣告會覆寫CSS中任何其他的宣告。 ie6不支援此屬性

內聯樣式表的權值最高 1000；即在html中為元素標籤加style，即內嵌樣式。此方法會造成css難以管理，所以不建議使用。

ID 選擇器的權值為 100；由一個或多個id選擇器來定義。例如，#id{margin:0;}id選擇器會覆寫類別選擇器.classname{margin:3pxl}

Class 類別選擇器的權值為10；由一個或多個類別選擇器、屬性選擇器、偽類選擇器定義。如.classname{margin:3px}會覆寫div{margin:6px;}

標籤選擇器權值為 1：由一個或多個類型選擇器定義。如div{marigin:6px;}覆寫*{margin:10px;}

通配符選擇器：如*{marigin:6px;}

瀏覽器自訂或繼承權值為0.1

總結排序：!important > 行內樣式>ID選擇器> 類別選擇器> 標籤>通配符> 繼承>瀏覽器預設屬性

三、 ！ important

使用 !important 是一個壞習慣，應該盡量避免，因為這打斷了樣式表中的固有的級聯規則 使得調試找bug變得更加困難了。當兩個相互衝突的帶有!important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被採用。

查詢的經驗：

永遠不要在全站範圍的css 上使用!important

只在需要覆寫全站或外部css（例如引用的ExtJs 或YUI ）的特定頁面中使用   !important

永遠不要在你的外掛程式中使用!important

要優化考慮使用樣式規則的優先權來解決問題而不是!important

以上是如何替換bootstrap中的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！