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