如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題

這篇文章主要介紹“如何理解瀏覽器對于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)小程序的時(shí)候發(fā)現(xiàn)在一個(gè)標(biāo)簽中的不同兩個(gè)類給同一屬性設(shè)定了不同值的時(shí)候，最終屬性取值的特點(diǎn)：

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

csstest.html:

代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>CSStest</title>
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body>

aaaaaaa
bbbbbbb
ccccccc
ddddddd
eeeeeee
fffffff
</body>
</html>

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;
}

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

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

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

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

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

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í)用的文章！

文章標(biāo)題：如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題
URL鏈接：http://aaarwkj.com/article18/ggppgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、做網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題