前言扯淡
前兩天電話面試幕庐，被問道了一些 CSS 的基礎(chǔ)問題解愤，雖然答上來了冈绊，但是不夠全面侠鳄，而且給自己最大的感受是自己對一些概念十分模棱兩可，最直觀的體現(xiàn)是有時候知道這個概念死宣，卻不知道他叫什么伟恶。自以為懂，最為致命毅该。
需求是最好的學(xué)習(xí)API的方式博秫，面試找工作是最好的學(xué)習(xí)沉淀的過程】粽疲快倆個月沒寫博客了台盯，終于今天在回顧時有一點點小的感悟，打算記錄下來畏线，主要是給自己看。廢話不多說良价，開始正文寝殴。
首先是 優(yōu)先級
鏈接是文檔蒿叠，優(yōu)先級主要是指CSS屬性的優(yōu)先級。
瀏覽器通過優(yōu)先級來判斷哪一些屬性值與一個元素最為相關(guān)蚣常，從而在該元素上應(yīng)用這些屬性值市咽。優(yōu)先級是基于不同種類選擇器組成的匹配規(guī)則。
簡單來說抵蚊，當(dāng)你給一個元素聲明（或該元素繼承而來）多個相同屬性時（前提）施绎，瀏覽器選擇哪一個作為該元素的應(yīng)用。
<div>
<h1 id="title" class="title" style="color: yellow;">優(yōu)先級</h1>
</div>
<!--優(yōu)先級顯示為 pink-->
*{
color: red;
}
h1{
color: green;
}
.title{
color: blue;
}
#title{
color: black;
}
h1{
color: pink !important;
}
優(yōu)先級如何確定：
選擇器優(yōu)先級贞绳，下面三種優(yōu)先級遞增：（不細看文檔都不知道這些平時在用的選擇器的所有名稱）
- ID選擇器（例如, #title）
- 類選擇器（class selectors） (例如,.title)谷醉，屬性選擇器（attributes selectors）（例如, [type="radio"]），偽類（pseudo-classes）（例如, :hover）
- 類型選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）
通配選擇符（universal selector）(*), 關(guān)系選擇符（combinators） (+, >, ~, ' ') 和 否定偽類（negation pseudo-class）(:not()) 對優(yōu)先級沒有影響冈闭。（但是俱尼，在 :not() 內(nèi)部聲明的選擇器是會影響優(yōu)先級）。
給元素添加的內(nèi)聯(lián)樣式 (例如, style="color: yellow;") 總會覆蓋外部樣式表的任何樣式 萎攒，因此可看作是具有最高的優(yōu)先級遇八。
!important 是例外，此聲明將覆蓋任何其他聲明耍休，技術(shù)上!important與優(yōu)先級無關(guān)刃永，但它與它直接相關(guān)。
如何利用優(yōu)先級
- 選擇器越具體羊精，優(yōu)先級越高斯够。
- 相同優(yōu)先級情況下，后面的樣式覆蓋前面的园匹。
- !important 最特殊，有他的聲明最優(yōu)先裸违，但應(yīng)該避免使用。
上面內(nèi)容均來自 MDN供汛，也就是我給的鏈接，還有很多如無視DOM樹中的距離等沒有記錄怔昨。大家還是直接看MDN為宜雀久。這些真的是簡單的基礎(chǔ)內(nèi)容，但確實有很多細節(jié)趁舀，如果能夠因為無意看到我的文章去看MDN文檔而收獲一些東西，便是此文的意義了越庇。
擴展閱讀 真正理解"CSS選擇器的優(yōu)先級"
CSS預(yù)處理（預(yù)編譯）
當(dāng)面試關(guān)問我知不知道CSS預(yù)處理的時候罩锐，我一時并沒有將其與平常再用的 LESS、SCSS 等預(yù)編譯器對上卤唉。也就是我文章開頭提到的涩惑，有時我們以為熟知的東西，事實上我們那么陌生竭恬。
(以下內(nèi)容來自 再談 CSS 預(yù)處理器)
CSS 預(yù)處理器是什么熬的？一般來說痊硕，它們基于 CSS 擴展了一套屬于自己的 DSL悦析，來解決我們書寫 CSS 時難以解決的問題：
- 語法不夠強大，比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器亭螟；
- 沒有變量和合理的樣式復(fù)用機制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出预烙，導(dǎo)致難以維護道媚。
所以這就決定了 CSS 預(yù)處理器的主要目標(biāo)：提供 CSS 缺失的樣式層復(fù)用機制、減少冗余代碼最域，提高樣式代碼的可維護性。
這篇文章不打算繼續(xù)將 LESS牺蹄、SASS 等的嵌套薄翅、變量等語法規(guī)則。一來這些內(nèi)容非一篇文章講得清（我懶）翘魄，再者看官方文檔是最好的入門方式，同時像上面百度EFE的文檔比我寫肯定高到不知道哪里去了斋射。
那么我為什么會將 CSS 預(yù)處理和 優(yōu)先級 放在同一篇文章寫呢。也是面試官連續(xù)問的這倆個問題（真的很基礎(chǔ)了绩鸣，對我這種轉(zhuǎn)行前端新人十分照顧），再者其實兩者有一些聯(lián)系呀闻，CSS 預(yù)編譯也是在變相解決 優(yōu)先級 的問題潜慎，因為我們需要完美利用優(yōu)先級，所以我們在寫 CSS 時往往選擇器需要十分詳細垒手，如下
div{}
div>ul{}
div>ul>li{}
div>ul>li>a{}
本著 Dry 宗旨倒信，CSS 預(yù)編譯的嵌套規(guī)則就是為了解決優(yōu)先級啊。
本文僅供個人學(xué)習(xí)使用
