css系列-樣式權重

樣式權重

元素會被多個樣式一層層作用，這就是層疊樣式表的來源。如果多個樣式做用在元素上就會產生優先級權重問題。

使用類、ID、僞類都有不同的權重，具體應用哪條規則要看權限大小。

• 相同權重的規則應用最後出現的
• 可以使用 !important 強制提升某個規則的權限

• 權重應用

  規則	粒度
  ID	0100
  class，類屬性值	0010
  標籤,僞元素	0001
  *	0000
  行內樣式	1000

  下面是ID權限大於CLASS的示例

• <style>
    .color {
    	color: red;
    }
  
    #hot {
    	color: green;
    }
  </style>
      
  <h2 class="color" id="hot">id權重大</h2>
  

  屬性權重的示例

  <style>
    /* 權重:0021 */
    h2[class="color"][id] {
  		color: red;
    }
  
    /* 權重:0012 */
    article h2[class="color"] {
    	color: blue;
    }
  </style>
  
  <article>
  	<h2 class="color" id="hot">權重計算</h2>
  </article>
  

  行級權重優先級最高

  <style>
    /* 權重:0012 */
    article h2[class="color"] {
    	color: blue;
    }
  
    #hot {
    	color: black;
    }
  </style>
  
  <h2 class="color" id="hot" style="color:green;">行級權重最高1000</h2>
  

  #強制優先級

  有時在規則衝突時，爲了讓某個規則強制有效可以使用 !important。

  <style>
    h2 {
   	 color: red !important;
    }
  
    h2 {
   	 color: green;
    }
  </style>
  
  <h2>強制提升優先級</h2>
  

  兩條規則權限一樣，默認應用第二個規則，但第一個規則使用了!important 提升了權限，所以被應用。!important主要用於覆蓋行內樣式。我們儘量不要使用!important,儘量用class。

繼承規則

子元素可以繼承父元素設置的樣式。

• 子元素並不是全部樣式。比如邊框、高度等並不會繼承。
• 繼承的規則沒有權重

• <style>
    article {
      color: red;
      border: solid 1px #ddd;
    }
  </style>
  ...
  
  <article>
  	<h2>顏色繼承 <span>繼承article設置的顏色</span></h2>
  </article>
  

  上例中 h2 標籤沒有設置顏色樣式，將繼承 html 的顏色，並且邊框沒有產生繼承。

我們也可以修改默認是否繼承：

四個通用屬性值

css 爲控制繼承提供了四個特殊的通用屬性值，每個 css 屬性都能使用這些值。

• inherit

設置該屬性會使子元素屬性和父元素相同。實際上，就是“開啓繼承”。

• initial

將屬性的初始值應用於元素。實際上，就是“重置爲默認值”。

• unset

將屬性重置爲自然值，也就是如果屬性是自然繼承的那麼就是 inherit ，否則和 initial 一樣。

• revert

表示使用樣式表中定義的元素屬性的默認值。若用戶定義樣式表中顯式設置，則按此設置；否則，按照瀏覽器定義樣式表中的樣式設置；否則，等價於 unset 。（屬性值 revert 目前只有很少的瀏覽器支持）

css3 增加了 all 屬性，其值可以是上面四個之一，表示重置元素所有屬性的值重置爲其初始值，或繼承值。

.test{
    all: initial;
    all: inherit;
    all: unset;
    all: revert; 
}

通配符

在開發中使用* 選擇器會有一個問題。因爲通配符的權限爲0，而繼承的規則沒有權重，看以下代碼產生的問題。

<style>
  * {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>藍色 <span>顏色不發生變化</span></h2>
</article>

h2 中的span並沒有繼承 h2 的顏色，就是因爲繼承沒有權重。而使用了 * 權重爲0的規則。