深刻理解CSS選擇器優先級

什麼是選擇器優先級(Specificity)

直接複製了 MDN對優先級的定義css

瀏覽器經過優先級來判斷哪一些屬性值與一個元素最爲相關,從而在該元素上應用這些屬性值。優先級是基於不一樣種類選擇器組成的匹配規則。html

這句話也是很抽象,暫且先無論它了。可是咱們能夠先看一個例子:算法

  • HTML:
<div id="content" class="content">
我是什麼顏色
</div>
複製代碼
  • CSS:
#content {
    color: #f00;
}
.content {
     color: #0f0;
}
複製代碼

那最後文字是什麼顏色呢?答案很簡單:紅色。這就涉及到了優先級問題,同一塊內容,咱們同時用了 ID選擇器類選擇器,由於 ID選擇器 優先級大於 類選擇器 , 因此最終顯示爲紅色。瀏覽器

優先級的計算規則

相信每位寫過CSS的朋友都知道,CSS選擇器的優先級關係是:bash

內聯 > ID選擇器 > 類選擇器 > 標籤選擇器。app

可是,瀏覽器具體的優先級算法是怎樣的?可能還有些人不知道 。《CSS REFACTORING》 中提到了算法的過程 。字體

A specificity is determined by plugging numbers into (a, b, c, d):spa

  1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
  2. b is equal to the number of ID selectors present.
  3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
  4. d is equal to the number of type selectors and pseudoelements present.

翻譯過來就是翻譯

優先級是由 ABCD 的值來決定的,其中它們的值計算規則以下:code

  1. 若是存在內聯樣式,那麼 A = 1, 不然 A = 0;
  2. B 的值等於 ID選擇器 出現的次數;
  3. C 的值等於 類選擇器屬性選擇器僞類 出現的總次數;
  4. D 的值等於 標籤選擇器僞元素 出現的總次數 。

這樣子直接看好像也仍是很明白 ,那先上個例子:

#nav-global > ul > li > a.nav-link
複製代碼

套用上面的算法,依次求出 A B C D 的值:

  1. 由於沒有內聯樣式 ,因此 A = 0;
  2. ID選擇器總共出現了1次, B = 1;
  3. 類選擇器出現了1次, 屬性選擇器出現了0次,僞類選擇器出現0次,因此 C = (1 + 0 + 0) = 1
  4. 標籤選擇器出現了3次, 僞元素出現了0次,因此 D = (3 + 0) = 3;

上面算出的ABCD 能夠簡記做:(0, 1, 1, 3)

爲了熟悉掌握優先級算法 ,咱們再來作一些練習:

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
複製代碼

OK, 如今已經弄清楚了優先級是怎麼算的了。可是,還有一個問題,怎麼比較兩個優先級的高低呢? 比較規則是: 從左往右依次進行比較 ,較大者勝出,若是相等,則繼續往右移動一位進行比較 。若是4位所有相等,則後面的會覆蓋前面的

再來看一下例子:

  • html:
<div class="nav-list" id="nav-list">
	<div class="item">nav1</div>
	<div class="item">nav2</div>
</div>
複製代碼
  • CSS:
#nav-list .item {
	color: #f00;
}

.nav-list .item {
	color: #0f0;
}
複製代碼

算出 #nav-list .item 的優先級是 (0, 1, 1, 0), .nav-list .item 的優先級是 (0, 0, 2, 0)。 左邊第一位都是0, 再看看左邊第二位,前者是1,後者是0, 因此(0, 1, 1, 0) 的大於 (0, 0, 2, 0) ,即 #nva-list .item 大於 .nav-list .item,因此字體會是紅色。

優先級的特殊狀況

通過上面的優先級計算規則,咱們能夠知道內聯樣式的優先級是最高的,可是外部樣式有沒有什麼辦法覆蓋內聯樣式呢?有的,那就要 !important 出馬了。由於通常狀況下,不多會使用內聯樣式 ,因此 !important 也不多會用到!若是不是爲了要覆蓋內聯樣式,建議儘可能不要使用 !important 。、

那可能有人會想,那若是我內聯樣式用了 !important,是否是外部樣式就沒有辦法了呢?好比下面的代碼:

  • HTML:
<div class="app" style="color:#f00!important">666</div>
複製代碼
  • CSS:
.app {
	color: 0f0!important;
}
複製代碼

是的,你贏了,這時候內聯樣式已經強大到無論你外部樣式怎麼寫都沒法覆蓋它了。這種狀況在實際代碼中是要杜絕的!記住,千萬不要在內聯樣式中使用 !important

最後 , !important 真的是的沒法超越的王者嗎?其實不是的,一些狀況,咱們能夠超越 !important, 請看下面的例子:

  • html:
<div class="box" style="background: #f00; width: 300px!important;">個人寬度是多少呢??<div>
複製代碼
  • css:
.box {
	max-width: 100px;
}
複製代碼

這時候 .box 的寬度只有 100px , 而不是 300px, 可見,max-width 能夠超越 width!important!可是,這實際上不是優先級的問題,由於優先級是比較相同屬性的,而 max-widthwidth 是兩個不一樣的屬性。之因此舉這個例子,是要告訴你們,有時候無論怎麼設置容器的 width 都不生效,檢查一下是否是有人寫了 max-width 坑了你哈。

OK,優先級先寫到這裏啦,朋友們有問題歡迎留言討論~

相關文章
相關標籤/搜索