概念:級聯(The cascade),CSS是Cascading Style Sheet的簡寫,說明級聯是很是重要的。從表層來看,級聯代表CSS規則的順序問題,可是級聯遠比這個複雜,在全部的選擇器中摸個選擇器定義的規則是否可以勝出(既優先級)取決於三個元素:Important,Specificity,Source order。css
在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.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
若是多個競爭選擇器具備相同的重要性和特性值,代碼順序就發揮做用了,後來規則優先前面規則。
CSS中有些規則將會默認被子元素繼承,有些則不會。好比font系列屬性,文本系列屬性、列表系列屬性,cursor
CSS提供了三個特殊的值用來處理繼承class
1) inherit 繼承父元素的樣式 2) initial 不繼承。應用瀏覽器的默認樣式 3) unset 不設定,表現該規則原本特性,即若是該規則具備繼承屬性則繼承,不然不繼承。