你對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 掘金我的主頁，如需轉載，請放上原文連接並署名。碼字不易，感謝支持！本人寫文章本着交流記錄的心態，寫的很差之處，不撕逼，可是歡迎指點。

若是喜歡本文的話，歡迎關注個人訂閱號，漫漫技術路，期待將來共同窗習成長。

以上2018.5.19

參考資料：

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

深刻CSS優先級

css優先級