最近在學(xué)習(xí)CSS優(yōu)先級計(jì)算的規(guī)則這個(gè)地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。
CSS的權(quán)重
一、CSS的引入方式
1.在節(jié)點(diǎn)元素上，使用style屬性
2.通過link引入外部文件
3.通過style標(biāo)簽在頁面內(nèi)引入
三種引入方式的區(qū)別
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
body {
background: red;
}
</style>
</head>
<body style="background: yellow;">
</body>
</html>
body.css文件
body {
background: green;
}
1.第一種方式相對后面兩種優(yōu)先級高，與引入順序無關(guān) 無論link和style標(biāo)簽放在head內(nèi)，還是放在body內(nèi)，或者放在html標(biāo)簽結(jié)尾，頁面都會呈現(xiàn)yellow
2.第二種和第三種為平級引入，后引入的樣式覆蓋之前的引入樣式 去掉body上的style標(biāo)簽
調(diào)整link和style標(biāo)簽的先后順序。link在前，style標(biāo)簽在后，頁面呈現(xiàn)red，相反，頁面會呈現(xiàn)green
二、獲取節(jié)點(diǎn)的方式
1.id
2.class
3.標(biāo)簽
4.屬性
id
在一個(gè)頁面中id值應(yīng)該是唯一，但是，當(dāng)出現(xiàn)多個(gè)相同id時(shí)，樣式對所有id節(jié)點(diǎn)是有效的，使用方式：#后面跟節(jié)點(diǎn)id值
<body> <p id="id_p">第一個(gè)段落</p> <p id="id_p">第二個(gè)段落</p> </body>
#id_p {
color: red;
}
結(jié)果顯示，兩個(gè)段落中的文字都呈現(xiàn)red
1.id相對class和標(biāo)簽具有更高的權(quán)重，當(dāng)id和class、標(biāo)簽同時(shí)對一個(gè)節(jié)點(diǎn)設(shè)置樣式時(shí)，id的權(quán)重為最高
2.通過link和style標(biāo)簽對同一個(gè)id設(shè)置樣式時(shí)，后引入的樣式覆蓋之前的樣式
class
使用class可以對多個(gè)節(jié)點(diǎn)同時(shí)設(shè)置樣式，并且可以疊加class使用。使用方式.后面跟節(jié)點(diǎn)單個(gè)class名
<body> <p class="class-p">第一個(gè)段落</p> <p class="class-p class-p-2">第二個(gè)段落</p> </body>
.class-p {
color: red;
}
.class-p-2 {
color: green;
}
此時(shí)，第一個(gè)段落呈現(xiàn)red，第二個(gè)段落呈現(xiàn)green
調(diào)整html
<body> <p class="class-p">第一個(gè)段落</p> <p class="class-p-2 class-p">第二個(gè)段落</p><!-- 調(diào)換class-p 和 class-p-2 的順序 --> </body>
調(diào)整class-p和class-p-2的位置后，頁面呈現(xiàn)效果不變。說明：class樣式的渲染和class的使用順序無關(guān)，與class樣式設(shè)置的先后順序有關(guān)，同權(quán)重的class樣式，在樣式設(shè)置中，靠后的樣式設(shè)置覆蓋之前的樣式設(shè)置
屬性
通過節(jié)點(diǎn)上的屬性也可以得到要進(jìn)行樣式設(shè)置的節(jié)點(diǎn)
<body> <p>第一個(gè)段落</p> <p title="第二個(gè)段落的title">第二個(gè)段落</p> </body>
[title] {
color: red;
}
第二個(gè)段落有title屬性，所以第二個(gè)段落呈現(xiàn)red
標(biāo)簽
通過標(biāo)簽名獲取節(jié)點(diǎn)進(jìn)行樣式設(shè)置
<body> <p>第一個(gè)段落</p> <p>第二個(gè)段落</p> </body>
p {
color: red;
}
頁面中所有p標(biāo)簽節(jié)點(diǎn)呈現(xiàn)red
混合
以上四種方式可以混合使用，對相應(yīng)的節(jié)點(diǎn)進(jìn)行樣式設(shè)置。結(jié)合方式包括層級嵌套、樣式疊加、節(jié)點(diǎn)關(guān)聯(lián)等。最終以權(quán)重高者為呈現(xiàn)效果。
三、樣式權(quán)重
以上四種方式，針對單個(gè)而言，id最高，class和屬性同級（后面的樣式覆蓋之前的樣式），標(biāo)簽最低。
當(dāng)四種方式混合使用時(shí)，則以權(quán)重的結(jié)果為準(zhǔn)。對同一結(jié)點(diǎn)存在的id、class、屬性和標(biāo)簽樣式進(jìn)行排序，排位第一者為最終呈現(xiàn)效果。例如：對于節(jié)點(diǎn)p存在多種類型的樣式設(shè)置，首先挑選所有帶id的樣式，包括嵌套樣式。相同id下，對另一類型樣式進(jìn)行排序
<body class="body"> <p id="id_p">第一個(gè)段落</p> </body>
.body #id_p {
color: red;
}
#id_p {
color: green
}
雖然兩種樣式設(shè)置都有id，并且green效果在red之后被設(shè)置，但是通過排序可以得到相同#id_p下，前一個(gè)存在.body，所以最終呈現(xiàn)效果為red