4/28/2014
1:24:00 PM 0

CSS 權重計算

CSS 的權重是一個重要觀念,初學者常常遇到新增了 CSS 去改變某個元件的樣式表,但卻沒有作用,很可能是所設定的樣式表被其他權重高的樣式表所覆蓋,以下說明一些權重的計算方式
  1. Style sheets 來源有三種
    • user agent – 瀏覽器預設樣式, ex: 在 IE 中 float 屬性(property)在瀏覽器預設值是 none, 可參考 http://msdn.microsoft.com/en-us/library/ie/ms530751(v=vs.85).aspx
    • author – 開發人員定義的樣式, 即網頁撰寫人員在網頁上所定義的樣式表
    • user – 用戶在瀏覽器中定義的 CSS,不同的瀏覽器有不同的設定方式, 以 IE8 為例, 在工具 / 網際網路選項 可自定樣式表

  2. 重要性(importance)規則
    • normal
    • important 在CSS規則後添加 !important 權重提高
    若沒有使用 important 就屬於 normal, important 就好比是古代的尚方寶劍,使用它可讓權重加到最大
    example:
    <html>
    <head>
    <style>
    #myid { color: green; }
    .myclass { color: gold; }
    p { color: blue !important; }
    </style>
    </head>
    <body>
    <p id="myid" class="myclass" style="color: red">important</p>
    </body>
    </html>
    
    output:
    important

  3. 階層順序(Cascading order),由低至高排列,越底下權重越高,因此會覆蓋上面所定義的樣式
    • user agent declarations
    • user normal declarations
    • author normal declarations
    • author important declarations
    • user important declarations
  4. CSS 選擇器權重計算方式 (Calculating a selector's specificity)
    • 第一級 inline > ID > class > element
      ID 和 class 功能看起來似乎有點相同,在一般狀況下 ID 是唯一不可重覆的,而Class是可被拿來被重覆使用
      example:
      <html>
      <head>
      <style>
      #myid { color: green; }
      .myclass { color: gold; }
      p { color: blue; }
      </style>
      </head>
      <body>
      <p id="myid" class="myclass" style="color: red">inline > ID > class > element</p>
      <p class="myclass">class > element</p>
      </body>
      </html>
      
      output:
      inline > ID > class > element
      class > element
    • 第二級 詳細度高,權重越高(若第一級權重相同,才需比較第二級)
      example:
      <html>
      <head>
      <style>
      p.myclass { color: blue; }
      .myclass { color: red; }
      </style>
      </head>
      <body>
      <p class="myclass">h1.myclass > .myclass</p>
      </body>
      </html>
      
      output:
      h1.myclass > .myclass
    • 第三級 若前兩級權重相同,依照CSS在文件中定義的順序,後定義的樣式會覆蓋前面定義的樣式
      <html>
      <head>
      <style>
      p.myclass { color: blue; }
      body .myclass { color: red; }
      .myclass2 { color: yellow; }
      .myclass1 { color: green; }
      </style>
      </head>
      <body>
      <p class="myclass">後蓋前</p>
      <p class="myclass1 myclass2">double class 後蓋前</p>
      </body>
      </html>
      
      output:
      後蓋前
      double class 後蓋前
      *注意, p.myclass & body .myclass 有無使用空格作用是不同的

    權重計算式


    將 inline, ID, class, element 轉成 a, b, c, d 的方式做比較, 若使用一個 inline 的 style 則 a = 1, 若使用兩個 class 的 style 則 c = 2, 以此類推, a 的權重最大, 因此 a 的數字大則優先權高, 若 a 相同則繼續比較 b 的數字, 以此類推, 假使 abcd 全都相同,則後定義的樣式優先

  5. 以下為 W3C 計算權重的參考範例
     *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
     li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
     li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
     ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
     ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
     h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
     ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
     li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
     #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
     style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
     

0 comments:

Post a Comment