css屬性選擇器和類選擇器同時(shí)存在時(shí)權(quán)重誰高一些？

CSS對于多個(gè)選擇器的優(yōu)先性使用了一個(gè)叫做特殊性的方式。

特殊性

選擇器的特殊性分為4個(gè)等級，a b c d，從左到右，越左邊的越優(yōu)先, 如果一個(gè)選擇器規(guī)則有多個(gè)相同類型選擇器，則+1。

1. 如果是HTML內(nèi)樣式，那么特殊性最優(yōu)先，a=1

2. id選擇器的特殊性是b，

3. 類選擇器、偽類選擇器、屬性選擇器為c

4. 標(biāo)簽選擇器、偽元素選擇器為d

參照上述規(guī)則，.box為：0 0 1 0， div[class=box]為： 0 0 1 1，因此，后面一個(gè)選擇器的優(yōu)先級更高

div[class=box]是一個(gè)標(biāo)簽選擇器(div)和一個(gè)屬性選擇器([class=box])，所以權(quán)重是10 + 1；
.box是一個(gè)類選擇器，所以權(quán)重是10；
所以div[class=box]的權(quán)重要高。

即使你使用[class=box]，最后的效果也是藍(lán)色，因?yàn)樵跈?quán)重相同的情況下，會采用后定義的樣式，后面定義的樣式會覆蓋前面定義的樣式。

div[class=box]相當(dāng)于div.box，比.box大的