CSS札記（二）：級聯與繼承

yuan發表於2019-02-16
CSS繼承

一、級聯

概念:級聯（The cascade）,CSS是Cascading Style Sheet的簡寫，說明級聯是非常重要的。從表層來看，級聯表明CSS規則的順序問題，但是級聯遠比這個複雜，在所有的選擇器中摸個選擇器定義的規則是否能夠勝出（既優先順序）取決於三個元素：Important,Specificity,Source order。

1、！Important宣告（Important）

在css規則的值末尾新增“！Important”能夠保證該規則優先其它規則，但是一般不建議使用“！Important”,因為它會改變聯級的工作方式，使得除錯變得困難。

例如：
<style>
    #winning{
        background-color:red;
        border:1px solid black;
    }
    .better{
        background-color:gray;
        border:none !Important;
    }
</style>
<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all</p>

2、Specificity

通過四個特性值來量化一個選擇器

2.1. Thousands

Inline style(嵌入式樣式)，即直接寫在元素裡面，加1,0,0,0
例： <h1 style=”color:#fff;”>

2.2. Hundreds

包含在一個選擇器中所有的ID選擇器
例：#div

2.2. Tens

包含在一個選擇器中的所有 類屬性選擇器，類選擇器，偽類選擇器
例：.classes、[attributes]、#focus:hover

2.4. Ones

包含在一個選擇器中的所有元素選擇器，偽元素選擇器
例： ::after

3、程式碼順序 (Source order)

如果多個競爭選擇器具有相同的重要性和特性值，程式碼順序就發揮作用了，後來規則優先前面規則。

二、繼承（Inheritance）

CSS中有些規則將會預設被子元素繼承，有些則不會。比如font系列屬性，文字系列屬性、列表系列屬性，cursor
CSS提供了三個特殊的值用來處理繼承

1) inherit 繼承父元素的樣式    
2) initial 不繼承。應用瀏覽器的預設樣式    
3) unset 不設定，表現該規則本來特性，即如果該規則具有繼承屬性則繼承，否則不繼承。

相關文章