今天把 《CSS REFACTORING》(中文名叫《CSS重構:樣式表性能調優》)電子書粗略的瀏覽了一遍,這本書很薄,150頁左右,首先是介紹了什麼是重構並舉了兩個簡單的重構例子,而後介紹了CSS的選擇器優先級,再而後介紹了CSS的最佳實踐, 再而後就介紹如何重置瀏覽器的默認樣式,最後比較虛的、純理論的介紹了CSS重構的策略,而後就沒有而後了。這書總體內容很簡單,可是,其中對於 CSS選擇器優先級計算
做了比較深刻的講解。css
直接複製了MDN對優先級的定義 上的解釋:html
瀏覽器經過優先級來判斷哪一些屬性值與一個元素最爲相關,從而在該元素上應用這些屬性值。優先級是基於不一樣種類選擇器組成的匹配規則。算法
這句話也是很抽象,暫且先無論它了。可是咱們能夠先看一個例子:瀏覽器
<div id="content" class="content"> 我是什麼顏色 </div>
#content { color: #f00; } .content { color: #0f0; }
那最後文字是什麼顏色呢?答案很簡單:紅色。這就涉及到了優先級問題,同一塊內容,咱們同時用了 ID選擇器
和 類選擇器
,由於 ID選擇器
優先級大於 類選擇器
, 因此最終顯示爲紅色。app
相信每位寫過CSS的朋友都知道,CSS選擇器的優先級關係是:性能
內聯 > ID選擇器 > 類選擇器 > 標籤選擇器。字體
可是,瀏覽器具體的優先級算法是怎樣的?可能還有些人不知道 。《CSS REFACTORING》 中提到了算法的過程 。翻譯
A specificity is determined by plugging numbers into (a, b, c, d):code
翻譯過來就是htm
優先級是由 A
、B
、C
、D
的值來決定的,其中它們的值計算規則以下:
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,優先級先寫到這裏啦,朋友們有問題歡迎留言討論~