解釋CSS三大特性—繼承性、層疊性、優先級

時間 2020-01-31

原文原文鏈接

1、繼承性

寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想
要設置一個可繼承的屬性，只需將它應用於父元素便可。

繼承性發生的前提是包含（嵌套關係）
★文字顏色能夠繼承
★文字大小能夠繼承
★字體能夠繼續
★字體粗細能夠繼承
★文字風格能夠繼承
★行高能夠繼承
h系列不能繼承文字大小
a標籤不能繼承文字顏色css

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css繼承性</title>
    <style>
        div{
            color: #ffffff;
            font-size: 16px;
            text-decoration: underline;
            background: #ffc107;
            border-radius: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>
<div>
    <p>子元素</p>
    <ul>
        <li>
            <p>後代元素</p>
        </li>
    </ul>
    <a href="#">www.vipbic.com</a>
    <h1>我是羊先生</h1>
</div>
</body>
</html>

2、層疊性

一、什麼是層疊性？html

CSS處理衝突的一種能力，這個咱們稱之爲層疊性

二、什麼狀況出現層疊性？瀏覽器

只有在多個選擇器中「同一個標籤」，又設置了「相同的屬性」的時候，就會發生層疊性

三、發生層疊性會怎麼樣？字體

當發生層疊性時，哪一個選擇器設置的屬性起做用，是由優先級來肯定

3、優先級

權重大的樣式修飾，即便在權重小的前面先調用，也是隻會顯示大的權重
樣式

一、什麼是優先級？spa

多個選擇器可能會選擇同一個元素，優先級高的先作，優先級低的後作，這個咱們稱之爲優先級。

二、優先級判斷方式有哪些？firefox

是不是直接選中（間接選中就是指繼承，若是是間接選中時，就近原則）
直接選中時是相同選擇器（則誰寫在後面就聽誰的）
直接選中時不是同選擇器（則就會按照選擇器的優先級來層疊）

三、CSS選擇器優先級code

!important > 行內 > id > 類 > 標籤 > 通配符 > 繼承 > 瀏覽器默認

權重類型	權重值	解釋
繼承或者* 的貢獻值	0	權重值最低，稍微有點背景的都能幹掉他
每一個元素（標籤）貢獻值	1	權重第二小
每一個類，僞類貢獻值爲	10	類和僞類是同級別第三小的
每一個ID貢獻值爲	100	級別正數排行第三
每一個行內樣式貢獻值	1000	級別雖然高但不推薦使用
每一個!important貢獻值	∞ 無窮大	級別最高

!importanthtm

用於提高某個直接選中標籤的選擇器中的某個屬性的優先級的, 能夠將被指定的屬性的優先級提高爲最高
注意點: 
1. !important只能用於直接選中, 不能用於間接選中 
2. 通配符選擇器選中的標籤也是直接選中的 
3. !important只能提高被指定的屬性的優先級, 其它的屬性的優先級不會被提高 
4. !important必須寫在屬性值得分號前面 
5. !important前面的感嘆號不能省略
6. IE6及更早瀏覽器下，!important在同一條規則集內不生效

科普知識: 不一樣瀏覽器採用不一樣大小的空間來存儲每一位上的權重值：如firefox和ie都是用的8位來存儲class位的權重值，也就是2^8=256。當疊加26層class時權重爲10*26=260，就會發生溢出，向id位進一，權重爲大於一個單一的id選擇器.此時26層class的樣式會在forefox上發揮做用，覆蓋住id選擇器的樣式效果blog

關於我

相關標籤/搜索

每日一句

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