這篇文章給大家分享的是有關怎么替換bootstrap中的樣式的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10年積累的網站設計、成都做網站經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有丁青免費網站建設讓你可以放心的選擇與我們合作。

更改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 相鄰兄弟選擇器器 (如：h2+p,帶加號+)

二、優先級

當在一個樣式聲明上使用 !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中的樣式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網站欄目：怎么替換bootstrap中的樣式-創新互聯
文章地址：http://www.js-pz168.com/article4/dgojoe.html

成都網站建設公司_創新互聯，為您提供標簽優化、自適應網站、外貿建站、ChatGPT、移動網站建設、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯