CSS的繼承性與優先順序

標籤：logs   clear   transform   play   src   塊元素   ext   lis   imp   

一、CSS的繼承性

　　在CSS中不可繼承的屬性：display、margin、padding、border、background、width、min-width、max-width、height、min-height、max-height、overflow、position、left、right、top、bottom、z-index、float、clear、vertical-align、page-break-after、page-break-before等

　　所有元素可繼承的屬性：visibility和cursor

　　內嵌元素可繼承的屬性：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

　　塊元素可繼承的屬性：text-align和text-indent

　　列表元素可繼承的屬性：list-style、list-style-type、list-style-position、list-style-image

　　表格元素可繼承的屬性：border-collapse

 

二、CSS的優先順序

樣式的優先順序：

多重樣式（如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素）的情況下，優先順序為：內聯樣式 > 內部樣式 > 外部樣式 。有個例外的情況，當外部樣式位於內部樣式的後面時，外部樣式將覆蓋內部樣式

 

選取器的優先順序：

(1)內聯樣式表的權值最高為1000

(2) id 選取器的權值為100

(3) class 類別選取器的權值為10

(4) html 標籤選取器的權值為1

一個CSS樣式的權值 = 出現的各層級的選取器的權值分別相加；

例如：

在外部CSS檔案中或<style>標籤中如下定義：

p  {color: red;}    /*一個標籤選取器，權值為1*/

div  p {color:  red;}    /*兩個標籤選取器器，權值為2*/

#te .tt {color:  red;}    /*一個id選取器，一個類別選取器，權值為110*/

在某個標籤的style屬性中如下定義：

p  {color: red;}    /*在內聯樣式表中定義，一個標籤選取器，權值為1001*/

 

優先順序法則：

1、選取器都有一個權值，權值越大越優先；

2、當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；

3、創作者的規則高於瀏覽者，即網頁編寫者設定的CSS樣式的優先順序高於瀏覽器所設定的樣式；

4、繼承的CSS樣式不如後來指定的CSS樣式；

5、在同一組屬性中標有“!important”規則的優先順序最大；

例如：

//cssp {color:red;}#test p {color:green;}//html<p>test1</p><div id="test"><p>test2</p></div>

 

　　結果如下：

　　

 

CSS的繼承性與優先順序