直接複製了 MDN對優先級的定義 :css
瀏覽器經過優先級來判斷哪一些屬性值與一個元素最爲相關,從而在該元素上應用這些屬性值。優先級是基於不一樣種類選擇器組成的匹配規則。html
這句話也是很抽象,暫且先無論它了。可是咱們能夠先看一個例子:算法
<div id="content" class="content">
我是什麼顏色
</div>
複製代碼
#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
翻譯過來就是翻譯
優先級是由 A
、B
、C
、D
的值來決定的,其中它們的值計算規則以下:code
A = 1
, 不然 A = 0
;B
的值等於 ID選擇器
出現的次數;C
的值等於 類選擇器
和 屬性選擇器
和 僞類
出現的總次數;D
的值等於 標籤選擇器
和 僞元素
出現的總次數 。這樣子直接看好像也仍是很明白 ,那先上個例子:
#nav-global > ul > li > a.nav-link
複製代碼
套用上面的算法,依次求出 A
B
C
D
的值:
A = 0
;B = 1
;C = (1 + 0 + 0) = 1
;D = (3 + 0) = 3
;上面算出的A
、 B
、C
、D
能夠簡記做:(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位所有相等,則後面的會覆蓋前面的
再來看一下例子:
<div class="nav-list" id="nav-list">
<div class="item">nav1</div>
<div class="item">nav2</div>
</div>
複製代碼
#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
,是否是外部樣式就沒有辦法了呢?好比下面的代碼:
<div class="app" style="color:#f00!important">666</div>
複製代碼
.app {
color: 0f0!important;
}
複製代碼
是的,你贏了,這時候內聯樣式已經強大到無論你外部樣式怎麼寫都沒法覆蓋它了。這種狀況在實際代碼中是要杜絕的!記住,千萬不要在內聯樣式中使用 !important
最後 , !important
真的是的沒法超越的王者嗎?其實不是的,一些狀況,咱們能夠超越 !important
, 請看下面的例子:
<div class="box" style="background: #f00; width: 300px!important;">個人寬度是多少呢??<div>
複製代碼
.box {
max-width: 100px;
}
複製代碼
這時候 .box
的寬度只有 100px
, 而不是 300px
, 可見,max-width
能夠超越 width!important
!可是,這實際上不是優先級的問題,由於優先級是比較相同屬性的,而 max-width
和 width
是兩個不一樣的屬性。之因此舉這個例子,是要告訴你們,有時候無論怎麼設置容器的 width
都不生效,檢查一下是否是有人寫了 max-width
坑了你哈。
OK,優先級先寫到這裏啦,朋友們有問題歡迎留言討論~