原則一： 繼承不如指定
原則二： #id > .class > 標籤選擇符
原則三：越具體越強大
原則四：標籤#id >#id ; 標籤.class > .class
css優先順序包含四個級別（標籤內選擇符，id選擇符，class選擇符，元素選擇符）以及各級別出現的次數!
根據這四個級別出現的次數計算得到css的優先順序。
css優先順序的計算規則如下：
css檔案或
h1
/* 乙個元素選擇符，結果是0,0,0,1 */
body h1
/* 兩個元素選擇符，結果是 0,0,0,2 */
h2.grape
/* 乙個元素選擇符、乙個class選擇符，結果是 0,0,1,1*/
li#answer
/* 乙個元素選擇符，乙個id選擇符，結果是0,1,0,1 */
元素的style屬性中如下定義：
h1 /* 元素標籤中定義，乙個元素選擇符，結果是1,0,0,1*/
注意：
1、!important宣告的樣式優先順序最高，如果衝突再進行計算。
2、如果優先順序相同，則選擇最後出現的樣式。
3、繼承得到的樣式的優先順序最低。
選擇器表示式或示例 說明
權重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,::selection
1
css選擇器 權重
基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫，建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深，一定能夠被選上 3 選擇頁面所有的，而不是具體某乙個 標籤選擇器，選擇的是頁面上所有這種型別的標籤，所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...
css選擇器權重介紹
選擇器與偽元素的權重情況 高權重的選擇會覆蓋低權重的展示樣式 選擇器表示式或示例 說明權重 行內選擇器 style 1000 id選擇器 aaa 100類選擇器 aaa 10標籤選擇器 h1元素的tagname 1屬性選擇器 img alt div class pus 10相鄰選擇器 selecte...
CSS選擇器，深入理解CSS選擇器權重
前端工程師經常和選擇器權重打交道，但是部分人還是一知半解，下面咱們一起學習一下吧。類選擇器 active 標籤選擇器 div 屬性選擇器 img alt 通用選擇器 選擇器權重 這裡的 權 和是數學中加權平均數的 權 乙個意思。當同時多個css選擇器語句的目標是同乙個html元素時，選擇器權重就派上...