css优先级机制说明
首先說明下樣式的優先級,樣式有三種：
1. 外部樣式（External style sheet）
示例：
<!-- 外部樣式 bootstrap.min.css --><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">2.內部樣式（Internal style sheet）
示例:
<head><style type="text/css"> /*內部樣式*/ h1 {color:blue;} </style> </head>3.內聯樣式（Inline style）
示例：
<h1 style="color:blue">樣式測試</h1>雖然內聯樣式可以比較靈活的單獨改變某一標簽的樣式，但還是建議盡量不要使用內聯樣式。因為這樣做雖然更為直觀，但不符合結構與表現分離的設計思想。
一般來說，以上三種樣式的優先級如下：
內聯樣式>內部樣式>外部樣式
選擇器的優先級：
選擇器的種類可以分為三種，分別是：
1.標簽名選擇器? 如 h1{}。
2.類選擇器 ?如 .test{}。
3.ID選擇器 ?如 #test{}。
同時還需要考慮到內聯樣式表，即在標簽內寫入style=""的方式。
在此我們用數字1000，100,10,1來表示上述三種選擇器和內聯樣式表的權值，數字越大則權值越大，也就是優先級越高。
各個選擇器的權值如下：
1.? 內聯樣式表的權值最高，設為1000；
2.? ID 選擇器的權值其次，設為 100
3.? Class 類選擇器的權值第三，設為 10
4.? HTML 標簽選擇器的權值最低，設為 1
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 內部樣式 */ #blueP p { /* 權值 = 100+1=101 */ color:blue; } #blueP .red { /* 權值 = 100+10=110 */ color:red; } #blueP p span { /* 權值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 權值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">優先級測試 <span>優先級測試</span> </p> <p>優先級測試</p> </div> </body> </html>在火狐，IE10，Chrome瀏覽器頁面顯示結果如下：
<p class="red">標簽內的內容顯示為紅色
<span>標簽內的內容顯示為黃色
最后一個<p>標簽內的內容顯示為藍色
另外在同一組屬性設置中標有“!important”規則的優先級最大，示例如下：
<head><style type="text/css"> /*內部樣式 */ #redp p { color:red !important; /* 優先級最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important測試</p> </div> </body> </html>在火狐，IE10，Chrome瀏覽器頁面顯示結果如下：
<p>標簽里的內容顯示為紅色
其他補充：
1.選擇器的權值越大優先級越高；
2.當權值相等時，后出現的樣式表設置比先出現的樣式表設置優先級高；
3.繼承的CSS 樣式優先級低于后來指定的CSS 樣式
4.后代選擇器和群組選擇器是對標簽名選擇器、類選擇器和ID選擇器的擴展應用，在此就不介紹了。
轉載于:https://www.cnblogs.com/EvanHao/p/learncss.html
總結
以上是生活随笔為你收集整理的css优先级机制说明的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux系统的基本法则
- 下一篇： Word 2003中为什么修改一个段落的