欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中理解層疊性及權重如何分配

  發(fā)布時間：2022-10-24 16:28:19   作者： 翼同學   我要評論
這篇文章主要介紹了CSS中理解層疊性及權重如何分配,CSS的三大特性，分別是層疊性、優(yōu)先性和繼承性，本文給大家詳細講解，對css層疊性權重相關知識感興趣的朋友跟隨小編一起看看吧

前言

大家好，我是翼同學。今天筆記的內(nèi)容是：

  • CSS的三大特性，分別是層疊性、優(yōu)先性和繼承性

三大特性

??層疊性

什么是層疊性？

在CSS中，樣式的設置順序很重要。當相同選擇器設置同一樣式時，往往最后設置的樣式才是實際應用的樣式，這就是CSS的層疊性。

為了更好的理解這個概念，先來看這樣一個問題：

h3 {
color: red;
}
h3 {
color: blue;
}

上述代碼運行后，color屬性應呈現(xiàn)哪個值？

很顯然，答案是藍色。

總的來說，相同級別的選擇器選擇設置同一樣式時，會發(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)先性

選擇器具有權重的概念，不同權重的選擇器優(yōu)先級不同。當發(fā)生樣式?jīng)_突時（同一元素的屬性被多次設置），瀏覽器會根據(jù)不同選擇器的權重來判斷哪些樣式設定有效，這就是CSS的優(yōu)先性。

就前面的例子而言，標簽選擇器h3 { } 會選擇頁面中所有的<h3>標簽，這并不是很具體。但是類選擇器會選擇頁面中具有特定class屬性的標簽，這就稍微具體了些。所以，類選擇器的權重會比標簽選擇器大一些，導致即使標簽選擇器在最后定義也無法實現(xiàn)特定效果。

總結(jié)：

當同一個元素被多個不同的選擇器指定時，就會有優(yōu)先級存在。根據(jù)選擇器的權重來決定執(zhí)行哪個樣式。（關于權重，后面小節(jié)單獨講）

??繼承性

繼承性也是CSS中的一大特性。如何理解繼承？

舉個例子，將一個元素的color值設置為紅色，如果該元素的子元素沒有設置color值，那么子元素會自動繼承父元素的設定值，也就是紅色。

  • 總的來說，繼承就是一些在父元素上的樣式設置，可以被子元素繼承。

注意，只是一部分屬性可以被繼承，例如：顏色color屬性。也有無法被繼承的屬性，比如width。

小結(jié)：

  • 常見的可繼承的屬性：color屬性、font屬性、text屬性
  • 常見的不可繼承的屬性：width、height、border、margin、padding

權重

當不同選擇器定義同一屬性時，瀏覽器該選擇執(zhí)行哪一個？前文講過，這種情況叫做樣式?jīng)_突，當發(fā)生樣式?jīng)_突時，會有優(yōu)先級的指向。由于不同選擇器的權重不同，使得樣式?jīng)_突的解決成為可能。那么到底選擇器的權重有哪些呢？

具體優(yōu)先級看下表：

等級 定義 權重
一 !important 最大
二 行內(nèi)樣式 1, 0, 0, 0
三 ID選擇器 0, 1, 0, 0
四 類、偽類選擇器、屬性選擇器 0, 0, 1, 0
五 標簽選擇器 0, 0, 0, 1
六 通配符選擇器* 0, 0, 0, 0
七 繼承 沒有權重

注意事項：

  • !important是用于指定樣式規(guī)則的最大優(yōu)先權
  • 但注意，雖然!important權重最大，但是并不經(jīng)常使用。
  • 等級一到等級六，權重依次遞減，并且注意到，繼承是沒有權重的。
  • 不同選擇器間設置同一屬性，瀏覽器會根據(jù)選擇器的權重大小來決定執(zhí)行哪個樣式
  • 需要注意的是，復合選擇器的使用會產(chǎn)生權重的疊加問題

權重疊加時，如何計算疊加權重？

具體來說，就是相同位上的值互相疊加，但不會產(chǎn)生進位。

舉個例子：

h2 p {
    color: red;
}
.nav p {
    color: green;
}

運行后，段落的顏色顯示為綠色。

在上面這個例子中:

  • 后代選擇器 h2 p { } 權重為0,0,0,1 + 0,0,0,1 = 0,0,0,2
  • 后代選擇器.nav p { }權重為0,0,1,1 + 0,0,0,1 = 0,0,1,1
  • 可以看到，權重相加后是不會出現(xiàn)進位的

最后，總結(jié)如下：

權重值一共有四位數(shù)值，判斷權重大小的方法是從左往右，判斷位上數(shù)值的大小，如果某一位的數(shù)值相同，則判斷下一位數(shù)值。

到此這篇關于CSS中理解層疊性及權重如何分配的文章就介紹到這了,更多相關css層疊性權重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論