CSS選擇器的權(quán)重如何判斷？
在前面，我們學(xué)習(xí)了樣式表引入的優(yōu)先級(jí)判斷。如果多個(gè)選擇器都來修飾同一個(gè)元素，優(yōu)先級(jí)又該如何判斷呢?
我們來看一個(gè)例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS選擇器權(quán)重——一個(gè)例子</title>
<style>
#h-one {
color: blue
}
* {
color: orange
}
.header {
color: green
}
h1 {
color: red
}
</style>
</head>
<body>
<h1 class="header" id="h-one" style="color: purple">
學(xué)歷和能力哪個(gè)更重要？
</h1>
</body>
</html>
仔細(xì)觀察一下，h1 元素同時(shí)存在內(nèi)聯(lián)樣式和內(nèi)部樣式的修飾。內(nèi)部樣式的 ID 選擇器、通用選擇器、類選擇器和元素選擇器，也都指向了 h1 元素。
多個(gè)樣式作用于同一個(gè)元素，是沖突的，到底哪個(gè)優(yōu)先級(jí)更高呢?
現(xiàn)在，標(biāo)題文本的顏色你一定知道，是紫色。因?yàn)閮?nèi)聯(lián)樣式優(yōu)先級(jí)高于內(nèi)部樣式。
如果把內(nèi)聯(lián)樣式刪掉，標(biāo)題的文本會(huì)是什么顏色呢?
我們看，是藍(lán)色!說明這四個(gè)選擇器，ID 選擇器優(yōu)先級(jí)最高。
去掉 ID 選擇器，標(biāo)題變成了綠色!說明這三個(gè)選擇器，類選擇器優(yōu)先級(jí)最高。
再去掉類選擇器，標(biāo)題變成了紅色!說明元素選擇器優(yōu)先級(jí)高于通用選擇器。
最后去掉元素選擇器，標(biāo)題變成了橙色!說明這里通用選擇優(yōu)先級(jí)最低。
通過這個(gè)例子，我們可以總結(jié)一個(gè)規(guī)律：行內(nèi)樣式優(yōu)先級(jí)大于ID選擇器，大于類選擇器，大于元素選擇器，大于通用選擇器。但是，光掌握這個(gè)規(guī)律還不夠，遇到一些更復(fù)雜選擇器，就比較難判斷了。
我們?cè)倏匆粋€(gè)案例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS選擇器權(quán)重——第二個(gè)例子</title>
<style>
p { /* 1 */
color: purple;
}
div p { /* 1 + 1 = 2 */
color: green;
}
.box p { /* 10 + 1 = 11 */
color: orange;
}
#box p { /* 100 + 1 = 101 */
color: red;
}
div#box p { /* 1 + 100 + 1 = 102 */
color: blue;
}
</style>
</head>
<body>
<p>我覺得能力更重要！</p>
<div class="box">
<p>其實(shí)這無非是證明自己價(jià)值、或被別人認(rèn)可的一種方式，從客觀的角度來講，當(dāng)你大學(xué)剛畢業(yè)的時(shí)候，沒有工作經(jīng)驗(yàn)，那學(xué)歷肯定是讓別人認(rèn)可你的第一方式。</p>
</div>
<div id="box">
<p>但是如果你工作了三五年，還只能靠學(xué)歷來證明自己的價(jià)值，那我覺得是很失敗的。</p>
</div>
</body>
</html>
在這個(gè)案例中，所有的選擇都在針對(duì) p 元素，設(shè)定它的文字顏色。很明顯這些選擇器，它們之間也是沖突的，這個(gè)時(shí)候?yàn)g覽器會(huì)根據(jù)選擇器的權(quán)重值來判斷。
也就是說，當(dāng)樣式發(fā)生沖突時(shí)，誰的權(quán)重值高，誰就生效!那權(quán)重值該怎么計(jì)算呢?
這里，給你一個(gè)表，你只需要記住這 5 個(gè)東西，就一勞永逸了。
通用選擇器，它的選擇范圍最大，權(quán)重值最小，只有 0。
元素選擇器，權(quán)重值為 1。
類選擇器，權(quán)重值是 10。
ID 選擇器，權(quán)重值是 100。
行內(nèi)樣式，權(quán)重值最大，是 1000。
有了這 5 個(gè)選擇器的權(quán)重值，就可以計(jì)算任何一個(gè)選擇器的權(quán)重了，優(yōu)先級(jí)也會(huì)一目了然。
比如，看這個(gè)選擇器：井號(hào)box，下面的 p 元素，下面的點(diǎn)light。(#box p .light) 這個(gè)選擇器的權(quán)重值有多大呢?
沒錯(cuò)，只需要把這三個(gè)選擇器的權(quán)重值相加就可以了。
再對(duì)比一下這個(gè)選擇器(#box .light)，很明顯的看出來，上邊這個(gè)選擇器的優(yōu)先級(jí)更高。
如果你剛開始接觸CSS，計(jì)算權(quán)重值可能會(huì)有一些麻煩。
選擇器選擇的范圍越小，越精確，優(yōu)先級(jí)就越高!
你可以自己把這個(gè)秘籍，套用到剛才的兩個(gè)選擇器中驗(yàn)證一下。
再次回到這個(gè)例子。
我們可以把這些選擇器的權(quán)重值都計(jì)算出來。
第一個(gè)段落，哪個(gè)選擇器對(duì)應(yīng)它呢?只有第一個(gè)匹配了，權(quán)重值為 1。此時(shí)也沒有別的樣式?jīng)_突。這個(gè)段落的文字顏色就是紫色了!
第二個(gè)段落，對(duì)應(yīng)它的選擇器有三個(gè)。這里可以明顯的看到，哪一個(gè)權(quán)重值是最高的，那就是最后一個(gè)。所以，這個(gè)段落的顏色就是橙色。
第三個(gè)段落，對(duì)應(yīng)它的選擇器有四個(gè)。我們也可以很容易的從權(quán)重值中，看到那個(gè)選擇器的優(yōu)先級(jí)最高。所以，第三個(gè)段落的顏色是藍(lán)色。
猜你喜歡LIKE
相關(guān)推薦HOT
更多>>
影視剪輯這樣做，你也能火！
看了這么多類型的視頻，最好入手的且漲粉快的莫過于影視剪輯類賬號(hào)。不過這也不是隨便剪剪就可以的，也有很多小伙伴不知道怎么制作。如果你要在...詳情>>
2023-04-20 11:19:19
抖音粉絲團(tuán)怎么升級(jí)快
頻繁地發(fā)布內(nèi)容：保持良好的發(fā)布頻率，有助于維持用戶的興趣，并吸引新用戶。與其他用戶合作：給其他目標(biāo)受眾相似的用戶點(diǎn)贊和評(píng)論，可以吸引更...詳情>>
2023-04-11 11:45:12
javastringbuffer類有哪些方法
Java中的StringBuffer類和StringBuilder類都可以動(dòng)態(tài)地創(chuàng)建和修改字符串，StringBuffer是線程安全的，而StringBuilder則是非線程安全的。下面是...詳情>>
2023-03-17 16:16:19
pyecharts是什么？主要特點(diǎn)是什么
Pyecharts是一款基于Python語言的開源數(shù)據(jù)可視化庫(kù)，它使用Echarts.js作為底層渲染引擎，支持生成各種常見的圖表，如折線圖、柱狀圖、散點(diǎn)圖、...詳情>>
2023-03-03 11:49:02熱門推薦
發(fā)抖音帶話題流量更高？
沸抖音買1000粉會(huì)封嗎？那些短視頻運(yùn)營(yíng)你不得不知道的事情
熱做短視頻你不得不知道的事情之抖音流量池分配規(guī)則
熱影視剪輯這樣做，你也能火！
新抖音發(fā)日常和作品有什么不一樣
抖音粉絲團(tuán)怎么升級(jí)快
mysql和mariadb有什么區(qū)別
javastringbuffer類有哪些方法
怎樣把mysql卸載干凈?mysql怎么卸載干凈重裝
pyecharts是什么？主要特點(diǎn)是什么
視頻剪輯軟件哪個(gè)好?電腦軟件vs手機(jī)軟件
vugen(virtualusergenerator)的作用是什么
mvvm的概念、原理及實(shí)現(xiàn)
meta viewport是做什么用的？
技術(shù)干貨
快速通道 更多>>
-
課程介紹
點(diǎn)擊獲取大綱 -
就業(yè)前景
查看就業(yè)薪資 -
學(xué)習(xí)費(fèi)用
了解課程價(jià)格 -
優(yōu)惠活動(dòng)
領(lǐng)取優(yōu)惠券 -
學(xué)習(xí)資源
領(lǐng)3000G教程 -
師資團(tuán)隊(duì)
了解師資團(tuán)隊(duì) -
實(shí)戰(zhàn)項(xiàng)目
獲取項(xiàng)目源碼 -
開班地區(qū)
查看來校路線
京公網(wǎng)安備 11010802030320號(hào)