前言扯淡
前兩天電話面試，被問道了一些 CSS 的基礎問題，雖然答上來了，但是不夠全面，而且給自己最大的感受是自己對一些概念十分模棱兩可，最直觀的體現是有時候知道這個概念，卻不知道他叫什么。自以為懂，最為致命。
需求是最好的學習API的方式，面試找工作是最好的學習沉淀的過程?？靷z個月沒寫博客了，終于今天在回顧時有一點點小的感悟，打算記錄下來，主要是給自己看。廢話不多說，開始正文。
首先是 優先級
鏈接是文檔，優先級主要是指CSS屬性的優先級。
瀏覽器通過優先級來判斷哪一些屬性值與一個元素最為相關，從而在該元素上應用這些屬性值。優先級是基于不同種類選擇器組成的匹配規則。
簡單來說，當你給一個元素聲明（或該元素繼承而來）多個相同屬性時（前提），瀏覽器選擇哪一個作為該元素的應用。
<div>
<h1 id="title" class="title" style="color: yellow;">優先級</h1>
</div>
<!--優先級顯示為 pink-->
*{
color: red;
}
h1{
color: green;
}
.title{
color: blue;
}
#title{
color: black;
}
h1{
color: pink !important;
}
優先級如何確定：
選擇器優先級，下面三種優先級遞增：（不細看文檔都不知道這些平時在用的選擇器的所有名稱）
- ID選擇器（例如, #title）
- 類選擇器（class selectors） (例如,.title)，屬性選擇器（attributes selectors）（例如, [type="radio"]），偽類（pseudo-classes）（例如, :hover）
- 類型選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）
通配選擇符（universal selector）(*), 關系選擇符（combinators） (+, >, ~, ' ') 和 否定偽類（negation pseudo-class）(:not()) 對優先級沒有影響。（但是，在 :not() 內部聲明的選擇器是會影響優先級）。
給元素添加的內聯樣式 (例如, style="color: yellow;") 總會覆蓋外部樣式表的任何樣式 ，因此可看作是具有最高的優先級。
!important 是例外，此聲明將覆蓋任何其他聲明，技術上!important與優先級無關，但它與它直接相關。
如何利用優先級
- 選擇器越具體，優先級越高。
- 相同優先級情況下，后面的樣式覆蓋前面的。
- !important 最特殊，有他的聲明最優先，但應該避免使用。
上面內容均來自 MDN，也就是我給的鏈接，還有很多如無視DOM樹中的距離等沒有記錄。大家還是直接看MDN為宜。這些真的是簡單的基礎內容，但確實有很多細節，如果能夠因為無意看到我的文章去看MDN文檔而收獲一些東西，便是此文的意義了。
擴展閱讀 真正理解"CSS選擇器的優先級"
CSS預處理（預編譯）
當面試關問我知不知道CSS預處理的時候，我一時并沒有將其與平常再用的 LESS、SCSS 等預編譯器對上。也就是我文章開頭提到的，有時我們以為熟知的東西，事實上我們那么陌生。
(以下內容來自 再談 CSS 預處理器)
CSS 預處理器是什么？一般來說，它們基于 CSS 擴展了一套屬于自己的 DSL，來解決我們書寫 CSS 時難以解決的問題：
- 語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重復的選擇器；
- 沒有變量和合理的樣式復用機制，使得邏輯上相關的屬性值必須以字面量的形式重復輸出，導致難以維護。
所以這就決定了 CSS 預處理器的主要目標：提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。
這篇文章不打算繼續將 LESS、SASS 等的嵌套、變量等語法規則。一來這些內容非一篇文章講得清（我懶），再者看官方文檔是最好的入門方式，同時像上面百度EFE的文檔比我寫肯定高到不知道哪里去了。
那么我為什么會將 CSS 預處理和 優先級 放在同一篇文章寫呢。也是面試官連續問的這倆個問題（真的很基礎了，對我這種轉行前端新人十分照顧），再者其實兩者有一些聯系，CSS 預編譯也是在變相解決 優先級 的問題，因為我們需要完美利用優先級，所以我們在寫 CSS 時往往選擇器需要十分詳細，如下
div{}
div>ul{}
div>ul>li{}
div>ul>li>a{}
本著 Dry 宗旨，CSS 預編譯的嵌套規則就是為了解決優先級啊。
本文僅供個人學習使用
