CSS札記(二):級聯與繼承

1、級聯

概念:級聯(The cascade),CSS是Cascading Style Sheet的簡寫,說明級聯是很是重要的。從表層來看,級聯代表CSS規則的順序問題,可是級聯遠比這個複雜,在全部的選擇器中摸個選擇器定義的規則是否可以勝出(既優先級)取決於三個元素:Important,Specificity,Source order。css

一、!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>

二、Specificity

經過四個特性值來量化一個選擇器調試

2.1. Thousandscode

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

2.2. Hundreds繼承

包含在一個選擇器中全部的ID選擇器
例:#div

2.2. Tensci

包含在一個選擇器中的全部 類屬性選擇器,類選擇器,僞類選擇器
例:.classes、[attributes]、#focus:hover

2.4. Onesit

包含在一個選擇器中的全部元素選擇器,僞元素選擇器
例: ::after

三、代碼順序 (Source order)

若是多個競爭選擇器具備相同的重要性和特性值,代碼順序就發揮做用了,後來規則優先前面規則。

2、繼承(Inheritance)

CSS中有些規則將會默認被子元素繼承,有些則不會。好比font系列屬性,文本系列屬性、列表系列屬性,cursor
CSS提供了三個特殊的值用來處理繼承class

1) inherit 繼承父元素的樣式    
2) initial 不繼承。應用瀏覽器的默認樣式    
3) unset 不設定,表現該規則原本特性,即若是該規則具備繼承屬性則繼承,不然不繼承。
相關文章
相關標籤/搜索