大家好痢毒，我是小雨小雨儿惫，致力于分享有趣的泵琳、實(shí)用的技術(shù)文章尖飞。
內(nèi)容分為翻譯和原創(chuàng)匆背，如果有問題忘晤，歡迎隨時(shí)評(píng)論或私信窃判，希望和大家一起進(jìn)步燥爷。
大家的支持是我創(chuàng)作的動(dòng)力寄摆。
選擇器的優(yōu)先級(jí)
眾所周知谅辣，選擇器是有權(quán)重的，優(yōu)先級(jí)從低到高婶恼，如下所示：
- 類型選擇器（例如桑阶，h1）和偽元素（例如，::before）
- 類選擇器 (例如勾邦，.example)蚣录，屬性選擇器（例如，[type="radio"]）和偽類（例如眷篇，:hover）
- ID 選擇器（例如包归，#example）
- !important 此聲明將覆蓋任何其他聲明，不建議使用铅歼，除非以下幾種情況：
- 覆蓋內(nèi)聯(lián)樣式
- 覆蓋優(yōu)先級(jí)絕對(duì)高的選擇器
選擇器解析
雖然我們平常寫css選擇器是從左到右書寫的：
根節(jié)點(diǎn) .子節(jié)點(diǎn) .孫節(jié)點(diǎn){
}
但是公壤，這只不過是為了方便使用者書寫，真正的解析順序是反過來的椎椰，也就是從子節(jié)點(diǎn)搜索到根節(jié)點(diǎn)厦幅，原因很簡(jiǎn)單，因?yàn)椴檎掖螖?shù)將大大影響效率慨飘。一個(gè)個(gè)來說
由于css tree是樹結(jié)構(gòu)确憨，如果從根節(jié)點(diǎn)開始，那么就是類似深度優(yōu)先遍歷的查找方式瓤的，一圖辟千言：
如果到最后一個(gè)子節(jié)點(diǎn)仍然找不到的話休弃，就是回到之前的父節(jié)點(diǎn)，繼續(xù)查找其他的子節(jié)點(diǎn)圈膏，其實(shí)看起來也沒毛病哈塔猾，那我們來個(gè)對(duì)比，看下css為什么選擇從左到右解析稽坤。
一樣的圖丈甸，換了個(gè)解析方向：
很明顯的差別就是糯俗，我們的判斷條件提前了，先判斷孫節(jié)點(diǎn)是否匹配睦擂，只有匹配才會(huì)繼續(xù)深入得湘，否則直接跳過，然后這就從多個(gè)多條線（深度優(yōu)先遍歷）變成了多個(gè)單條線的問題顿仇，有點(diǎn)類似于從O(n2) => O(n)的意思淘正，大大提高了元素匹配效率。
大白話解釋就是： 從右到左解析比從左到右解析減少了查找失敗的次數(shù)和深度
還有一點(diǎn)就是公共樣式臼闻，對(duì)于公共樣式跪帝，其實(shí)就是多個(gè)相同的樣式，從子節(jié)點(diǎn)到根節(jié)點(diǎn)是完全相同的些阅，也就是一條線即可
書寫高效css選擇器
- 優(yōu)先就是避免使用通配符匹配，這樣css從右到左的解析就白搭了斑唬，莫得用處了市埋。就和從左到右一樣一樣的了。
- 之前提到的選擇器優(yōu)先級(jí)ID選擇器是最高的恕刘，但這僅僅限于單獨(dú)用ID選擇器缤谎，如果你和其他選擇器混合使用的話，就發(fā)揮不到id選擇器的唯一高效性了褐着。為什么呢坷澡？因?yàn)閺挠业阶蠼馕鲅剑热?#box .text含蓉，會(huì)先進(jìn)行類選擇器的查找频敛，最后才是ID選擇器，所以ID選擇器就顯的沒那么重要了馅扣。
- 盡量少使用標(biāo)簽結(jié)束斟赚，因?yàn)檫@會(huì)讓瀏覽器查找很多個(gè)子節(jié)點(diǎn)，然后才能確定是否匹配差油，比如：
.box a拗军，只要有a標(biāo)簽就會(huì)進(jìn)行查找，但是其實(shí)我們只想給.box上的a設(shè)置樣式蓄喇，我們可以給個(gè)更具體的類選擇器：.box .href发侵，這樣就能匹配更少的元素啦 - 還有就是經(jīng)常說的避免選擇器超過三個(gè)，比如
.div1 .div2 .div3 .p .a就可以優(yōu)化為.div1 .a妆偏，為啥這樣說的刃鳄，因?yàn)椴檎抑幸灿袟l件進(jìn)行判斷啊我們提供了一個(gè)子節(jié)點(diǎn).a，并且是在.div1下的其實(shí)就夠了钱骂，他會(huì)沿著一條線查找铲汪，知道跟節(jié)點(diǎn)熊尉，咱寫這么多選擇器只會(huì)徒增判斷條件，沒卵用掌腰。狰住。 - 還有就是盡量寫得具體，可以使用
>操作符等等 - 選擇器上能縮寫的命名就盡量縮寫齿梁、相同父層級(jí)的選擇器合并催植，都可以適當(dāng)減少css體積。
- 使用CSS BEM書寫規(guī)范
- 歡迎補(bǔ)充
最后
這次分享內(nèi)容就到這了勺择，比較短小创南，哈哈。
打算做完rollup之后省核，重拾基礎(chǔ)了稿辙，畢竟一切都是從根本一點(diǎn)點(diǎn)碼起來的，只有底子厚了气忠，才能厚積薄發(fā)邻储。
