CSS層疊和繼承

時間 2019-11-17

標籤 css 層疊繼承欄目 CSS 简体版

原文原文鏈接

　　CSS具備兩個核心的概念——繼承和層疊。通常文本類的屬性會被繼承，即某個元素的CSS屬性會傳遞給內部嵌套的元素。一個元素可能有一個或者多個樣式的來源，當屬性發生衝突時，就會根據加載順序和權重大小決定層疊以後顯示的屬性。先看一個層疊機制表，並對照例子觀察層疊規律：css

	行內	id	class	元素
行內	1	0	0	0
id	0	1	0	0
class、屬性、僞類	0	0	1	0
元素、僞元素	0	0	0	1
通配符 *	0	0	0	0
!important	最高

　　不一樣的選擇器具備不一樣的權重值，只有在選擇器指向同一元素的時候纔會比較權重，如 #wrapper span 和 span[name=test] 並非指向同一元素，由於後面的選擇器指向屬性name爲test的span元素，因此後面選擇器的屬性生效，沒有衝突的樣式纔會應用前面選擇器的。html

<div id="wrapper">
    <span name="test"><span>
</div>

　　對全部類型設置字體顏色，結果以下：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css優先級測試</title>
    <style>
        #test{  color: orange;}
        .test{  color: yellow;  }
        p{  color: green;  }
        *{  color: cyan;  }
        p{  !important;  color: blue;  }
        span{  color: purple;  }
    </style>
</head>
<body>
    <p style="color: red">內嵌紅色</p>
    <p id="test">id橙色</p>
    <p class="test">class黃色</p>
    <p>元素綠色</p>
    <p>通配青色</p>
    <p>最高藍色</p>
    <p> <span>子元素紫色</span> </p>
</body>
</html>

　　在頁面中顯示結果以下：測試

　　能夠看到元素和通配符設置的CSS屬性沒有顯示自己的文字顏色，其他均正確顯示設置的顏色，檢查內嵌、id和class的樣式變化，結果以下：字體

　　能夠看到，網頁先進行繼承，將通配給html和body的青色斷定後，在進行對這個p元素的CSS顏色設置，隨後根據權重前後選擇了通配、元素、最高的顏色，最後鎖定類名設置的黃色，經過這樣的比較，前面6組都能獲得結果，最後一個span檢查結果以下：spa

　　如今緣由也是一目瞭然，span元素逐級繼承，此處的p元素文本是藍色，再對span元素進行層疊，有通配的青色和元素的紫色，因爲元素優先級高，全部採用了元素設置的紫色。3d

　　對同一個元素，分別設置內嵌、id、class和元素選擇器設置顏色，內嵌字體顏色紅色，id橙色，class黃色，元素綠色，代碼以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css同一元素優先級測試</title>
    <style>
        #test{  color: orange;}
        .test{  color: yellow;  }
        p{  color: green; }
    </style>
</head>
<body>
    <p id="test" class="test" style="color: red">同一元素測試</p>
</body>
</html>

　　網頁中顯示結果以下：htm

　　檢查其變換規則：blog

　　元素選擇器優先級最低，綠色最底層，僞類黃色其次，id橙色再層疊，內嵌優先級最高，紅色在最上方，最後顯示紅色。

　　對於嵌套元素，針對該元素採用不一樣的疊加，須要比較每一位數值比較其重要性，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css層疊測試</title>
    <style>
        .box1 .p1 span{color: red;}
        .box1 span{color: blue;}
        .box1 p span{color: green;}
    </style>
</head>
<body>
    <div class="box1">
        <p class="p1">
            <span>四川</span>
        </p>
    </div>
</body>
</html>

　　顯示結果以下：

　　首先.box1 span的層疊數爲0 0 1 1，.box1 p span的數值爲0 0 1 2，.box1 .p1 span的數值爲0 0 2 1，因此先採用數值最小的顏色，再被數值較大的綠色覆蓋，最後是數值最大的紅色，最終被顯示。

　　總結一下，html的層疊是由通配、元素和僞元素、class和僞類、id、內嵌從底層往上層依次層疊，對於同一級的選擇器，具備!important;屬性的優先級最高，不然就要根據其放置的順序判斷。元素屬性從最大一級的祖先元素繼承，依次判斷繼承直至到該元素內容所在的設置有css樣式的最裏面一層。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。