CSS繼承性之深入剖析(3)

來源:互聯網
上載者:User

CSS繼承性在應用中存在,那麼在樣式表中可能會有些讀者搞不清,多個樣式表同時應用到一個元素對象上會發生什麼情形呢?先舉個簡單的例子,請運行下面的代碼:
CSS網頁布局 -
   [ 可先修改部分代碼 再運行查看效果 ]
  我們會看到啟動並執行效果:因為選擇符h1和.aaa都匹配上面的h1元素,那麼到底瀏覽器會應用哪一個呢?通過在瀏覽器中觀察,我們發現這段文字應用了.aaa這個樣式,所以它顯示的是紅色。這是因為兩條規則的特殊性不一樣,CSS規則必須這樣進行處理。而字型的大小,卻是h1預設的大小。
  樣式表中的特殊性描述了不同規則的相對權重,它的基本規則是:
  統計選擇符中的ID屬性個數。
  統計選擇符中的CLASS屬性個數。
  統計選擇符中的HTML標記名格式。
  最後,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位元。( 注意,你需要將數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性淩駕於較低數位。
  以下是一個按特性分類的選擇符的列表:
 

 代碼如下 複製代碼
 H1 {color:blue;}              特性值為:1
  P EM {color:purple;}          特性值為:2
  .apple {red;}              特性值為:10 
  P.bright {color:yellow;}          特性值為:11
  P.bright EM.dark {color:brown;}        特性值為:22
  #id316 {color:yellow}           特性值為:100

  從上表我們可以看出#id316具有更高的特殊性,因而它有更高的權重。當有多個規則都能應用於同一個元素時,權重越高的樣式將被優先採用。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.