溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”，在日常操作中，相信很多人在如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
自己做點小程序的時候發(fā)現(xiàn)在一個標簽中的不同兩個類給同一屬性設定了不同值的時候，最終屬性取值的特點：
上面這句話有夠拗口的，用例子說明一切吧。
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;
}
最后在瀏覽器審查元素的時候發(fā)現(xiàn)：
1、第一第二段落中，鼠標樣式都為move，字體大小都為2em，僅類b發(fā)揮了作用。
則說明：無論在標簽中class屬性里類的順序如何，最終相同的屬性值取css文件中聲明位置最后的那個。
2、第三第四段落中，鼠標樣式都為progress，字體大小都5em，僅類e發(fā)揮了作用，而在加載html頁面的時候，先加載1.css，再加載2.css。
則說明：無論在標簽中class屬性里類的順序如何，最終相同的屬性值取最后加載的css文件中聲明位置最后的那個。
3、第五第六段落中，鼠標樣式都為progress，字體大小都4em，類e起效，類d由于設定了!important，也起效。
則說明：設定了!important的值會優(yōu)先被選取。
后來我又測試了一下，把e中的font-size也加上!important之后，字體大小會變?yōu)?em，則對于都設定了!important的屬性值來說，遵循上面的規(guī)律。
到此，關于“如何理解瀏覽器對于CSS不同類中的同屬性不同值優(yōu)先級問題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
