這篇文章主要介紹“如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”，在日常操作中，相信很多人在如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、重慶服務(wù)器托管、云服務(wù)器、網(wǎng)絡(luò)空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn)，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、網(wǎng)絡(luò)空間、域名與空間、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

自己做點(diǎn)小程序的時候發(fā)現(xiàn)在一個標(biāo)簽中的不同兩個類給同一屬性設(shè)定了不同值的時候，最終屬性取值的特點(diǎn)：

上面這句話有夠拗口的，用例子說明一切吧。

csstest.html:

代碼如下:

aaaaaaa

bbbbbbb

ccccccc

ddddddd

eeeeeee

fffffff

1.css

代碼如下:

.a{
cursor: pointer;
font-size: 1em;
}
.b{
cursor: move;
font-size: 2em;
}
.c{
cursor: crosshair;
font-size: 3em;
}
.d{
cursor: help;
font-size: 4em !important;
}

2.css

代碼如下:

.e{
cursor: progress;
font-size: 5em;
}

最后在瀏覽器審查元素的時候發(fā)現(xiàn)：

1、第一第二段落中，鼠標(biāo)樣式都為move，字體大小都為2em，僅類b發(fā)揮了作用。

則說明：無論在標(biāo)簽中class屬性里類的順序如何，最終相同的屬性值取css文件中聲明位置最后的那個。

2、第三第四段落中，鼠標(biāo)樣式都為progress，字體大小都5em，僅類e發(fā)揮了作用，而在加載html頁面的時候，先加載1.css，再加載2.css。

則說明：無論在標(biāo)簽中class屬性里類的順序如何，最終相同的屬性值取最后加載的css文件中聲明位置最后的那個。

3、第五第六段落中，鼠標(biāo)樣式都為progress，字體大小都4em，類e起效，類d由于設(shè)定了!important，也起效。

則說明：設(shè)定了!important的值會優(yōu)先被選取。

后來我又測試了一下，把e中的font-size也加上!important之后，字體大小會變?yōu)?em，則對于都設(shè)定了!important的屬性值來說，遵循上面的規(guī)律。

到此，關(guān)于“如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！