CSS選擇器優(yōu)先級(jí)
概念：
瀏覽器通過(guò)優(yōu)先級(jí)來(lái)判斷哪一些屬性值與一個(gè)元素最為相關(guān)雳锋，從而在該元素上應(yīng)用這些屬性值蔫巩。優(yōu)先級(jí)是基于不同種類(lèi)選擇器組成的匹配規(guī)則。
優(yōu)先級(jí)是如何計(jì)算的？
由高到低分別是
- 在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫(xiě)在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類(lèi)選擇器
- 偽類(lèi)選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
復(fù)雜場(chǎng)景時(shí)
- 行內(nèi)樣式 <div style="xxx"></div> ==> a
- ID 選擇器 ==> b
- 類(lèi)参咙，屬性選擇器和偽類(lèi)選擇器 ==> c
- 標(biāo)簽選擇器、偽元素 ==> d
每個(gè)位置上的數(shù)字越大，選擇器的級(jí)別就越高待榔，如果全部相等的時(shí)候绣的，寫(xiě)在后面的選擇器權(quán)重高于寫(xiě)在前面的選擇器涤妒。abcd的權(quán)重依次遞減苏研。
測(cè)試
* {} /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
在這個(gè)測(cè)試中沒(méi)有寫(xiě)@import菊霜，在正常情況下奠衔，不要使用import流部，他會(huì)讓我們引用的CSS文件中的樣式覆蓋當(dāng)前的樣式戚绕。
