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