js是解釋性語言,一行一行地執行代碼,是以如果多個選擇器作用一個标簽時,誰的優先級大,這個标簽聽誰的。如果優先級相等，那麼後面的代碼将覆寫前面的代碼
1.首先比較id選擇器和class選擇器的優先級：
html代碼：
<div class="class" id="id">123</div>
css代碼：
.class{
font-size:20px;
color:#f00;
}
#id{
font-size:30px;
color:#00f;
}
執行結果:
出現這種結果有兩種可能,第一種id選擇器的優先級大于class選擇器的優先級;第二種id和class選擇器的優先級相同,id選擇器作用效果凸顯出來了,是以我們将id和class的css代碼換個位置
新的css代碼;
#id{
font-size:30px;
color:#00f;
}
.class{
font-size:20px;
color:#f00;
}
執行結果:
結論:id選擇器的優先級大于class選擇器的優先級
2.比較class選擇器和标簽選擇器的優先級
html代碼:
<div class="class">123</div>
css代碼:
div{
font-size:20px;
color:#f00;
}
.class{
font-size:12px;
color:#0f0;
}
執行結果:
我們将css中的div代碼塊和.class代碼塊互換位置,執行結果不變
結論:class選擇器的優先級高于标簽選擇器的優先級
3.比較标簽選擇器和通配符的優先級
html代碼:
<div>123</div>
css代碼:
div{
font-size:20px;
color:#000;
}
*{
font-size:30px;
color:#f00;
}
執行結果:
結論:标簽選擇器的優先級大于通配符的優先級
4.我們比較行間樣式(style)和id(剛剛比較優先級的老大)
html代碼:
<div style="font-size:30px;color:#000" id="id">
css代碼:
#id{
font-size:50px;
color:#f00;
}
執行結果:
結論:行間樣式的優先級大于id選擇器的優先級
優先級總結:行間樣式>id>class>标簽>通配符(*)
其實這裡有一個不用這樣比較選擇器優先級的css選擇權重,直接看誰的權重大,誰來作用
css權重:
css選擇器 權重
!important infinity(無窮大)
行間樣式 1000
id 100
class/屬性選擇器/僞類選擇器 10
标簽/僞元素 1
通配符 0
注意:在數學中正無窮加一和正無窮一樣大,但是在計算機中的infinity+1>infinity
1000,100,10,1,0之間的進制是256(一個工程師測出來的)
權重的用法:
html代碼:
<div class="demo">123</div>
css代碼:
div.class{
color:#000;
}
div[class]{
color:#f00;
}
執行結果:
123字型為紅色,因為标簽選擇器+class選擇器的權重等于标簽選擇器加屬性選擇器的權重,後面的代碼覆寫前面的代碼