自己做點(diǎn)小程序的時(shí)候發(fā)現(xiàn)在一個(gè)標(biāo)簽中的不同兩個(gè)類(lèi)給同一屬性設(shè)定了不同值的時(shí)候，最終屬性取值的特點(diǎn)：
上面這句話(huà)有夠拗口的，用例子說(shuō)明一切吧。
csstest.html:
代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>CSStest</title>
<link rel="stylesheet" href="1.css" />
<link rel="stylesheet" href="2.css" />
</head>
<body>
<!-- 類(lèi) a b c d 在1.css中，類(lèi) 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，僅類(lèi)b發(fā)揮了作用。
則說(shuō)明：無(wú)論在標(biāo)簽中class屬性里類(lèi)的順序如何，最終相同的屬性值取css文件中聲明位置最后的那個(gè)。
2、第三第四段落中，鼠標(biāo)樣式都為progress，字體大小都5em，僅類(lèi)e發(fā)揮了作用，而在加載html頁(yè)面的時(shí)候，先加載1.css，再加載2.css。
則說(shuō)明：無(wú)論在標(biāo)簽中class屬性里類(lèi)的順序如何，最終相同的屬性值取最后加載的css文件中聲明位置最后的那個(gè)。
3、第五第六段落中，鼠標(biāo)樣式都為progress，字體大小都4em，類(lèi)e起效，類(lèi)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ī)律。
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試版權(quán)所有:易賢網(wǎng)
公眾號(hào)
事業(yè)單位
當(dāng)前位置：