CSS中理解層疊性及權(quán)重如何分配
我要評(píng)論
前言
大家好，我是翼同學(xué)。今天筆記的內(nèi)容是：
- CSS的三大特性，分別是層疊性、優(yōu)先性和繼承性
三大特性
??層疊性
什么是層疊性？
在CSS中，樣式的設(shè)置順序很重要。當(dāng)相同選擇器設(shè)置同一樣式時(shí)，往往最后設(shè)置的樣式才是實(shí)際應(yīng)用的樣式，這就是CSS的層疊性。
為了更好的理解這個(gè)概念，先來看這樣一個(gè)問題：
h3 {
color: red;
}
h3 {
color: blue;
}
上述代碼運(yùn)行后，color屬性應(yīng)呈現(xiàn)哪個(gè)值？
很顯然，答案是藍(lán)色。
總的來說，相同級(jí)別的選擇器選擇設(shè)置同一樣式時(shí)，會(huì)發(fā)生樣式?jīng)_突，此時(shí)只有一個(gè)規(guī)則起作用，也就是最后一條樣式生效。這就是CSS層疊性
但有時(shí)我們發(fā)現(xiàn)，實(shí)際情況并不是這樣。看下面代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
color: red;
}
h3 {
color: blue;
}
</style>
</head>
<body>
<h3 class="nav">
Hello world！
</h3>
</body>
</html>
為什么上述代碼運(yùn)行后，標(biāo)題呈現(xiàn)為紅色？明明<h3>標(biāo)簽是在后面定義的，按照層疊性來講，標(biāo)題應(yīng)該呈現(xiàn)出藍(lán)色才是？
其實(shí)，這些都引出了CSS的另一大特性：優(yōu)先性。
??優(yōu)先性
選擇器具有權(quán)重的概念，不同權(quán)重的選擇器優(yōu)先級(jí)不同。當(dāng)發(fā)生樣式?jīng)_突時(shí)（同一元素的屬性被多次設(shè)置），瀏覽器會(huì)根據(jù)不同選擇器的權(quán)重來判斷哪些樣式設(shè)定有效，這就是CSS的優(yōu)先性。
就前面的例子而言，標(biāo)簽選擇器h3 { } 會(huì)選擇頁面中所有的<h3>標(biāo)簽，這并不是很具體。但是類選擇器會(huì)選擇頁面中具有特定class屬性的標(biāo)簽，這就稍微具體了些。所以，類選擇器的權(quán)重會(huì)比標(biāo)簽選擇器大一些，導(dǎo)致即使標(biāo)簽選擇器在最后定義也無法實(shí)現(xiàn)特定效果。
總結(jié)：
當(dāng)同一個(gè)元素被多個(gè)不同的選擇器指定時(shí)，就會(huì)有優(yōu)先級(jí)存在。根據(jù)選擇器的權(quán)重來決定執(zhí)行哪個(gè)樣式。（關(guān)于權(quán)重，后面小節(jié)單獨(dú)講）
??繼承性
繼承性也是CSS中的一大特性。如何理解繼承？
舉個(gè)例子，將一個(gè)元素的color值設(shè)置為紅色，如果該元素的子元素沒有設(shè)置color值，那么子元素會(huì)自動(dòng)繼承父元素的設(shè)定值，也就是紅色。
- 總的來說，繼承就是一些在父元素上的樣式設(shè)置，可以被子元素繼承。
注意，只是一部分屬性可以被繼承，例如：顏色color屬性。也有無法被繼承的屬性，比如width。
小結(jié)：
- 常見的可繼承的屬性：
color屬性、font屬性、text屬性 - 常見的不可繼承的屬性：
width、height、border、margin、padding
權(quán)重
當(dāng)不同選擇器定義同一屬性時(shí)，瀏覽器該選擇執(zhí)行哪一個(gè)？前文講過，這種情況叫做樣式?jīng)_突，當(dāng)發(fā)生樣式?jīng)_突時(shí)，會(huì)有優(yōu)先級(jí)的指向。由于不同選擇器的權(quán)重不同，使得樣式?jīng)_突的解決成為可能。那么到底選擇器的權(quán)重有哪些呢？
具體優(yōu)先級(jí)看下表：
| 等級(jí) | 定義 | 權(quán)重 |
|---|---|---|
| 一 | !important | 最大 |
| 二 | 行內(nèi)樣式 | 1, 0, 0, 0 |
| 三 | ID選擇器 | 0, 1, 0, 0 |
| 四 | 類、偽類選擇器、屬性選擇器 | 0, 0, 1, 0 |
| 五 | 標(biāo)簽選擇器 | 0, 0, 0, 1 |
| 六 | 通配符選擇器* |
0, 0, 0, 0 |
| 七 | 繼承 | 沒有權(quán)重 |
注意事項(xiàng)：
- !important是用于指定樣式規(guī)則的最大優(yōu)先權(quán)
- 但注意，雖然!important權(quán)重最大，但是并不經(jīng)常使用。
- 等級(jí)一到等級(jí)六，權(quán)重依次遞減，并且注意到，繼承是沒有權(quán)重的。
- 不同選擇器間設(shè)置同一屬性，瀏覽器會(huì)根據(jù)選擇器的權(quán)重大小來決定執(zhí)行哪個(gè)樣式
- 需要注意的是，復(fù)合選擇器的使用會(huì)產(chǎn)生權(quán)重的疊加問題
權(quán)重疊加時(shí)，如何計(jì)算疊加權(quán)重？
具體來說，就是相同位上的值互相疊加，但不會(huì)產(chǎn)生進(jìn)位。
舉個(gè)例子：
h2 p {
color: red;
}
.nav p {
color: green;
}
運(yùn)行后，段落的顏色顯示為綠色。
在上面這個(gè)例子中:
- 后代選擇器
h2 p { }權(quán)重為0,0,0,1 + 0,0,0,1 = 0,0,0,2 - 后代選擇器
.nav p { }權(quán)重為0,0,1,1 + 0,0,0,1 = 0,0,1,1 - 可以看到，權(quán)重相加后是不會(huì)出現(xiàn)進(jìn)位的
最后，總結(jié)如下：
權(quán)重值一共有四位數(shù)值，判斷權(quán)重大小的方法是從左往右，判斷位上數(shù)值的大小，如果某一位的數(shù)值相同，則判斷下一位數(shù)值。
到此這篇關(guān)于CSS中理解層疊性及權(quán)重如何分配的文章就介紹到這了,更多相關(guān)css層疊性權(quán)重內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css 權(quán)重值(層疊性)實(shí)例詳解 ,需要的朋友可以參考下2019-06-11- 下面小編就為大家?guī)硪黄獪\談CSS中的繼承性,特殊性,層疊性和重要性。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-09
