css層疊順序

標籤：style   使用   sp   div   bs   html   as   htm   nbsp   

優先順序：

1、添加！important規則的分組享有最高優先順序；會將所有不帶！important的規則

例如：#id{border：6px solid black!important}高於#id{border：6px solid black;}

2、第二級style屬性嵌入的規則 不便於維護 不推薦使用此方法

3、第三級具有一個或者多個ID選取器的規則

例如#id{border:9px solid red}優先順序高於.id{border:9px solid red;}

4、第四級優先順序分組具有一個或者多個類、屬性或偽類別選取器的規則

例如.class{border:9px solid red}高於div{border:2px solid black;}

5、第五級一個或者多個元素選取器優先規則

例如：div{border:10px solid red}高於*{border：5px solid black;}

6、第六級指的是那些只包含萬用字元選取器的規則

例如：*{border：5px solid black;}

備忘：如若規則屬於同一個選取器分組比如相關兩個規則都包含id選取器；那麼他們的優先順序會根據選取器的類型和數量進行比較；那個具有更多高優先順序那麼這個選取器的層級就高

（！important >style> ID選取器 > class選取器  > 標籤/元素選取器 > 萬用字元選取器）

；如若出現相同數量和層級的選取器；則會根據位置來進行判斷優先順序

位置分組優先順序：

1、最高優先順序html文檔頭部<style>元素

<style>元素會覆蓋<style>元素中@import語句引入的規則

2、<style>元素中的@import匯入的樣式會覆蓋link元素附件的樣式

3.link樣式會覆蓋link元素引入的樣式中@import引入的會覆蓋終端使用者附加樣式表的規則

4、link元素引入的樣式中@import引入的會覆蓋終端使用者附加樣式表的規則

5、使用者附加的樣式表（註：使用者添加的@important的樣式具有最高優先順序）

6、瀏覽器提供的預設規則

 

css層疊順序