你對CSS權重真的足夠了解嗎？

OBKoro1發表於2018-05-21
CSS

前言

css權重很多人都聽過，也瞭解一些，但是很多人對具體的規則或者說再深如一些關於css權重的問題，可能會不那麼清楚。日常開發中，或多或少都會遇到css規則不生效的問題，為了讓我們能夠減少除錯css規則的時間，深刻理解css權重，就十分關鍵了。如果喜歡的話可以點波贊/關注，支援一下，希望大家看完本文可以有所收穫。

個人部落格瞭解一下：obkoro1.com

權重規則總結:

  1. !important 優先順序最高，但也會被權重高的important所覆蓋
  2. 行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)
  3. 單獨使用一個選擇器的時候，不能跨等級使css規則生效
  4. 如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效
  5. 如果兩個相同權重的選擇器作用在同一元素上：以後面出現的選擇器為最後規則.
  6. 權重相同時，與元素距離近的選擇器生效

css權重優先順序用來幹嘛？

在同一個元素使用不同的方式，宣告瞭相同的一條或多條css規則，瀏覽器會通過權重來判斷哪一種方式的宣告，與這個元素最為相關，從而在該元素上應用這個宣告方式宣告的所有css規則。

權重的五個等級及其權重

  • !important;

  • 行內樣式;

  • ID選擇器, 權重:100;

  • class,屬性選擇器和偽類選擇器，權重:10;

      屬性選擇器指的是:根據元素的屬性及屬性值來選擇元素，比如button的type屬性等。
  偽類選擇器: :active :focus等選項.
複製程式碼

  • 標籤選擇器和偽元素選擇器，權重:1;

      偽元素選擇器： :before :after
複製程式碼

等級關係:

    !important>行內樣式>ID選擇器 > 類選擇器 | 屬性選擇器 | 偽類選擇器 > 元素選擇器
複製程式碼

權重規則：

1.不推薦使用!important

不推薦使用!important，因為!important根本沒有結構與上下文可言，並且很多時候權重的問題，就是因為不知道在哪裡定義了一個!important而導致的。

覆蓋important:

雖然我們應該儘量避免使用!important，但你應該知道如何覆蓋important，加點權重就可以實現，codepen的demo

    //!important 優先順序最高，但也會被權重高的important所覆蓋
    <button id="a" class="a">aaa</button>
    #a{
      background: blue  !important;  /* id的important覆蓋class的important*/
    }
    .a{
      background: red  !important;
    }
複製程式碼

2.行內樣式總會覆蓋外部樣式表的任何樣式,會被!important覆蓋

3.單獨使用一個選擇器的時候，不能跨等級使css規則生效

無論多少個class組成的選擇器，都沒有一個ID選擇器權重高。類似的，無論多少個元素組成的選擇器，都沒有一個class選擇器權重高、無論多少個ID組成的選擇器，都沒有行內樣式權重高。

codepen的demo;

    在demo中使用了11個class組成一個選擇器，最後還是一個ID選擇器，設定的樣式生效。
複製程式碼

可以想象在玄幻小說的那種等級制度，沒有突破那個等級，就沒有可比性。

所以權重是在雙方處於同一等級的情況下，才開始對比。

4.如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效

選擇器可能會包含一個或者多個與權重相關的計算點，若經過權重值計算得到的權重值越大，則認為這個選擇器的權重高。舉一個簡單的栗子:

    .test #test{ } // id 100+class 10=110;
    .test #test span{} // id 100+class 10+span 1=111;
    .test #test .sonClass{} // id 100+class 10+class 10=120; //生效
複製程式碼

5.如果兩個相同權重的選擇器作用在同一元素上：以後面出現的選擇器為最後規則.

demo

    <div id="app">
      <div class="test" id="test">
        <span >啦啦啦</span>
      </div>
    </div>
    #test span{
      color:blue;
    }
    #app span{ // 生效 因為後面出現
      color: red;
    }
複製程式碼

6.權重相同時，與元素距離近的選擇器生效

比如不同的style表，head頭部等,來看下面的栗子：

    #content h1 { // css樣式表中
      padding: 5px;
    }
    <style type="text/css">
      #content h1 { // html頭部 因為html頭部離元素更近一點，所以生效
        padding: 10px;
      }
    </style>
複製程式碼

建議：

  1. 避免使用!important;
  2. 利用id增加選擇器權重;
  3. 減少選擇器的個數（避免層層巢狀）;

結語

以上就是本文關於css權重的內容了，如有不對的地方歡迎指正！希望大家看完可以有所收穫，喜歡的話，趕緊點波訂閱關注/喜歡。

希望看完的朋友可以點個喜歡/關注，您的支援是對我最大的鼓勵。

個人blog and 掘金個人主頁，如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。

如果喜歡本文的話，歡迎關注我的訂閱號，漫漫技術路，期待未來共同學習成長。

你對CSS權重真的足夠了解嗎？

以上2018.5.19

參考資料：

你應該知道的一些事情——CSS權重

深入CSS優先順序

css優先順序

相關文章