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選擇器> 類別選擇器> 標籤> 通配符> 行內樣式>ID選擇器>類別選擇器> 標籤> 通配符> 繼承>瀏覽器預設屬性

#三、！ important

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

查詢的經驗：

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

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

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

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

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