原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大
原則四：標籤#id >#id ; 標籤.class > .class
css優先順序權重計算法
css優先順序包含四個級別（標籤內選擇符，id選擇符，class選擇符，元素選擇符）以及各級別出現的次數!
根據這四個級別出現的次數計算得到css的優先順序。
css優先順序的計算規則如下：
* 元素標籤中定義的樣式（style屬性）,加1,0,0,0
* 每個id選擇符(如 #id),加0,1,0,0
* 每個class選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個偽類(如 :hover)加0,0,1,0
* 每個元素選擇符（如p）或偽元素選擇符(如 :firstchild)等，加0,0,0,1
然後，將這四個數字分別累加，就得到每個css定義的優先順序的值，
然後從左到右逐位比較大小，數字大的css樣式的優先順序就高。
例子：css檔案或中如下定義：
1. h1
/* 乙個元素選擇符，結果是0,0,0,1 */
2. body h1
/* 兩個元素選擇符，結果是 0,0,0,2 */
3. h2.grape
/* 乙個元素選擇符、乙個class選擇符，結果是 0,0,1,1*/
4. li#answer
/* 乙個元素選擇符，乙個id選擇符，結果是0,1,0,1 */
元素的style屬性中如下定義：
h1 /* 元素標籤中定義，乙個元素選擇符，結果是1,0,0,1*/
如此以來，h1元素的顏色是藍色。
注意：1、!important宣告的樣式優先順序最高，如果衝突再進行計算。
2、如果優先順序相同，則選擇最後出現的樣式。
3、繼承得到的樣式的優先順序最低。
結論是：比較同一級別的個數，數量多的優先順序高，如果相同即比較下一級別的個數
important->內聯->id->類->標籤|偽類|屬性選擇->偽物件->繼承->萬用字元->繼承
最後彙總為一張表
選擇器表示式或示例
說明權重
id選擇器
#aaa
100類選擇器
.aaa
10標籤選擇器
h1元素的tagname
1屬性選擇器
[title]
10相鄰選擇器
selecter+selecter
拆分為兩個選擇器再計算
兄長選擇器
selecter~selecter
拆分為兩個選擇器再計算
父子選擇器
selecter>selecter
拆分為兩個選擇器再計算
後代選擇器
selecter selecter
拆分為兩個選擇器再計算
萬用字元*
0各種偽類選擇器
如:link，:vusited，:hover，:active，:target，:root,:not等
10各種偽元素
如::first-letter，::first-line，::after,::before,::selection1
CSS選擇器的權重詳解
在我們開始之前，先搞明白幾個概念吧。下面是一段css a a focus a active a hover body jq interior 上面這個樣式表是由乙個個樣式規則組成，而每乙個樣式規則又可以分為兩部分 選擇符與宣告。選擇符就相當於jquery的選擇器，能針對特定元素進行設定。css有名叫...
css選擇器 權重
基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫，建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深，一定能夠被選上 3 選擇頁面所有的，而不是具體某乙個 標籤選擇器，選擇的是頁面上所有這種型別的標籤，所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...
CSS選擇器權重問題
原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符，id選擇符，class選擇符，元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...