本文內(nèi)容根據(jù) CSS Specificity 整理劳景。
首先誉简，根據(jù)優(yōu)先級從高到低，分為以下三類：
A. ID 選擇器（例如盟广，#example）
B. 類選擇器 (例如闷串，.example)，屬性選擇器（例如筋量，[type="radio"]）和偽類（例如烹吵，:hover）
C. 類型選擇器（例如，h1）和偽元素（例如桨武，::before）
接下來肋拔，我們要想查看一個選擇器中各個優(yōu)先級類別有多少個，使用 A-B-C 這個形式表示呀酸。例如：
- x-0-0：x 表示 ID 選擇器的數(shù)量凉蜂。
- 0-x-0：x 表示類、屬性和偽類選擇器的數(shù)量性誉。
- 0-0-x：x 表示類型和偽元素的數(shù)量窿吩。
- *, +, >, ~：全局選擇器沒有值，當結(jié)合了其它選擇器時错览，它們不會提升優(yōu)先級纫雁。
- :not(x)：反選偽類選擇器沒有值，但是傳遞的參數(shù)會提升優(yōu)先級倾哺。
示例
-
*-0-0-0 -
div-0-0-1 -
li > ul-0-0-2 -
.myclass-0-1-0 -
*.myclass-0-1-0
*全局選擇器沒有值 -
*[type:checkbox]-0-1-0 -
:only-of-type-0-1-0 -
li.myclass-0-1-1 -
li[attr]-0-1-1 -
li:nth-of-type(3n)~li-0-1-2 -
form input[type=email]-0-1-2 -
li.class:nth-of-type(3n)-0-2-1 -
input[type]:not(.class)-0-2-1 -
#myDiv-1-0-0 -
#myDiv li.class a[href]-1-2-2 -
#divitis #myDiv a-2-0-1 -
style=""-1-0-0-0 -
!important-1-0-0-0-0
最后兩個都已經(jīng)不按規(guī)則出牌了轧邪，明顯超出 ID 選擇器的優(yōu)先級了，所以使用它們的時候需要慎重思考羞海。
