css權重 - JavaShuo

css權重

咱們在使用CSS對網頁元素定義樣式時常常會遇到這種狀況：要對通常元素應用通常樣式，而後在更特殊的元素上覆蓋它們。那麼咱們怎麼樣來保證咱們所新定義的元素樣式能覆蓋目標元素上原有的樣式呢？佈局

在CSS中，會根據選擇器的特殊性來決定所定義的樣式規則的次序，具備更特殊選擇器的規則優先於具備通常選擇器的規則，若是兩個規則的特殊性相同，那麼後定義的規則優先。spa

那麼，又怎麼來計算選擇器的特殊性呢？下面這張圖介紹了特殊性的計算方法：.net

咱們把特殊性分爲4個等級，每一個等級表明一類選擇器，每一個等級的值爲其所表明的選擇器的個數乘以這一等級的權值，最後把全部等級的值相加得出選擇器的特殊值。code

4個等級的定義以下：blog

第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲10。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1。

例如上圖爲例，其中#NAV爲二等選擇器，.ACTIVE爲三等選擇器，UL、LI和A爲四等選擇器。則整個選擇器表達式的特殊性的值爲1*100+1*10+3*1=113get

下面是一些計算示例：string

注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，因此他們的權值都爲0。table

咱們再來看一個具體的例子：假若有如下組樣式規則，你能判斷出HTML代碼中的兩個標題是什麼顏色嗎？class

 
      01 
      #content div#main-content h2{ 
     
      02 
          color:red; 
     
      03 
      } 
     
      04 
      #content #main-content>h2{ 
     
      05 
          color:blue 
     
      06 
      } 
     
      07 
      body #content div[id="main-content"] h2{ 
     
      08 
          color:green; 
     
      09 
      } 
     
      10 
      #main-content div.paragraph h2{ 
     
      11 
          color:orange; 
     
      12 
      } 
     
      13 
      #main-content [class="paragraph"] h2{ 
     
      14 
          color:yellow; 
     
      15 
      } 
     
      16 
      div#main-content div.paragraph h2.first{ 
     
      17 
          color:pink; 
     
      18 
      }

如下是HTML代碼：bug

 
      01 
      <div id="content"> 
     
      02 
          <div id="main-content"> 
     
      03 
              <h2>CSS簡介</h2> 
     
      04 
              <p>CSS（Cascading Style Sheet，可譯爲「層疊樣式表」或「級聯樣式表」）是一組格式設置規則，用於控制Web頁面的外觀。</p> 
     
      05 
              <div class="paragraph"> 
     
      06 
                  <h2 class="first">使用CSS佈局的優勢</h2> 
     
      07 
                  <p>一、表現和內容相分離 二、提升頁面瀏覽速度 三、易於維護和改版 四、使用CSS佈局更符合如今的W3C標準.</p> 
     
      08 
              </div> 
     
      09 
          </div> 
     
      10 
      </div>

判斷出來了麼？答案是：兩個標題都是紅色的！

讓咱們來一塊兒算算六個樣式規則各自的特殊性的值：

第一個特殊性的值=2*100+2*1=202
第二個特殊性的值=2*100+1=201
第三個特殊性的值=1*100+1*10+3*1=113
第四個特殊性的值=1*100+1*10+2*1=112
第五個特殊性的值=1*100+1*10+1*1=111
第六個特殊性的值=1*100+2*10+3*1=123

清楚了吧，第一個樣式規則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍，後面一些規則雖然看起來好像更復雜，但特殊性並非拼誰的選擇器表達式寫得更長，ID選擇器纔是王道！

理解選擇器的特殊性很重要，特別是在修復bug的時候，由於你須要瞭解哪些規則優先及其緣由。

若是你遇到了彷佛沒有起做用的CSS規則，極可能是出現了特殊性衝突。請在你的選擇器中添加他的一個父元素的ID，從而提升它的特殊性。若是這能解決問題，就說明樣式表中其餘地方極可能有更特殊的規則，它覆蓋了你的規則。若是是這種狀況，你可能須要檢查代碼，解決特殊性衝突，讓代碼儘量簡潔。

轉載自連接：http://www.nowamagic.net/librarys/veda/detail/1606