如何理解瀏覽器對(duì)于CSS不同類中的同屬性不同值優(yōu)先級(jí)問(wèn)題-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)專注于信陽(yáng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供信陽(yáng)營(yíng)銷型網(wǎng)站建設(shè)，信陽(yáng)網(wǎng)站制作、信陽(yáng)網(wǎng)頁(yè)設(shè)計(jì)、信陽(yáng)網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造信陽(yáng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供信陽(yáng)網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

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

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

csstest.html:



代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<title>CSStest</title>
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body>
<!-- 類 a b c d 在1.css中，類 e 在2.css中 -->
<p class="a b">aaaaaaa</p>
<p class="b a">bbbbbbb</p>
<p class="c e">ccccccc</p>
<p class="e c">ddddddd</p>
<p class="d e">eeeeeee</p>
<p class="e d">fffffff</p>
</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ā)揮了作用。

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

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

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

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

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

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

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

分享名稱：如何理解瀏覽器對(duì)于CSS不同類中的同屬性不同值優(yōu)先級(jí)問(wèn)題-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://bm7419.com/article16/dsccdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站、外貿(mào)建站、標(biāo)簽優(yōu)化、域名注冊(cè)

廣告

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

成都網(wǎng)頁(yè)設(shè)計(jì)公司