資訊專欄INFORMATION COLUMN
摘要：選擇器匹配流程前進(jìn)一個選擇器按照來拆成數(shù)段，每當(dāng)滿足一段條件的時候，就前進(jìn)一段。后退選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時作用范圍邊緣回退。
加載css
加載是異步，不會影響DOM樹的構(gòu)建，只是說在CSS沒處理好之前，構(gòu)建好的DOM并不會顯示出來
啟發(fā)：所以CSS不能太大，頁面一打開將會停留較長時間的白屏，所以把圖片/字體等轉(zhuǎn)成base64放到CSS里面是一種不太推薦的做法
DOM去匹配css rule的時候必須先等頁面的css都下載完成
啟發(fā)：head中的css是要下載完的，body中放CSS的話，會重新計算
css語法：選擇器在9課程中可以了解更多選擇器：compound-selector
特點(css設(shè)計原則)：選擇器的出現(xiàn)順序，必定跟構(gòu)建 DOM 樹的順序一致，即：保證選擇器在 DOM 樹構(gòu)建到當(dāng)前節(jié)點時，已經(jīng)可以準(zhǔn)確判斷是否匹配，不需要后續(xù)節(jié)點信息 - 未來不可能會出現(xiàn)“父元素選擇器”這種東西
流式渲染，每生成一個dom節(jié)點，便立刻去匹配相應(yīng)的css規(guī)則
空格: 后代，選中它的子節(jié)點和所有子節(jié)點的后代節(jié)點
: 子代，選中它的子節(jié)點
+：直接后繼選擇器，選中它的下一個相鄰節(jié)點
~：后繼，選中它之后所有的相鄰節(jié)點
||：列，選中表格中的一列
winter不講怎么解析css規(guī)則啦，詞法分析和語法分析不做贅述
cssomCSSOM主要是DOM結(jié)構(gòu)上的盒的描述，它基本上是依附于DOM樹的，不要和css的語法樹混淆
cssom是有rule部分和view部分的，rule部分是在dom開始之前就構(gòu)件完成的，而view部分是跟著dom同步構(gòu)建的。
css選擇器匹配流程前進(jìn)：一個 CSS 選擇器按照 compound-selector來拆成數(shù)段，每當(dāng)滿足一段條件的時候，就前進(jìn)一段。
后退：選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時（作用范圍邊緣）回退。
后代選擇器 “空格”
規(guī)則：
前進(jìn)：找到了匹配 a#b 的元素時，我們才會開始檢查它所有的子代是否匹配 .cls(前進(jìn)到.cls)
后退：當(dāng)遇到 時，必須使得規(guī)則 a#b .cls 回退一步(回退到a#b)這樣第三個 span 才不會被選中 - 后代選擇器的作用范圍是父節(jié)點的所有子節(jié)點，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時回退。
a#b .cls {
width: 100px; } 1 2 3
后繼選擇器“ ~ ”
規(guī)則：給選擇器的激活- 帶上一個條件：父元素
原因：后繼選擇器只作用于一層.按照 DOM 樹的構(gòu)造順序，4 在 3 和 5 中間，我們就沒有辦法像前面講的后代選擇器一樣通過激活或者關(guān)閉規(guī)則來實現(xiàn)匹配
過程：當(dāng)前半段的 .cls 匹配成功時，后續(xù) * 所匹配的所有元素的父元素都已經(jīng)確定了（后繼節(jié)點和當(dāng)前節(jié)點父元素相同是充分必要條件
.cls~* {
border:solid 1px green;
}
1
2
3
4
5
子代選擇器“ >”
規(guī)則：拿當(dāng)前節(jié)點的父元素作為父元素
當(dāng) DOM 樹構(gòu)造到 div 時，匹配了 CSS 規(guī)則的第一段
激活.cls并且指定父元素必須是當(dāng)前 div
div>.cls {
border:solid 1px green;
}
1
2
3
4
5
直接后繼選擇器“ +”
思路1：只對唯一一個元素生效，把 #id+.cls 都當(dāng)做檢查某一個元素的選擇器
思路2：給后繼選擇器加上一個 flag，使它匹配一次后失效
列選擇器“ || ”
專門針對表格的選擇器，跟表格的模型建立相關(guān)，winter不講這個啦
其他
CSS 選擇器還支持逗號分隔
視為兩條規(guī)則的一種簡易寫法
a#b, .cls {}
a#b {}
選擇器可能有重合
使用樹形結(jié)構(gòu)來進(jìn)行一些合并
#a .cls {}
#a span {}
#a>span {}
#a
< 空格 >.cls
< 空格 >span
總結(jié)：
CSS 計算：把 CSS 規(guī)則應(yīng)用到 DOM 樹上，為 DOM 結(jié)構(gòu)添加顯示相關(guān)屬性的過程，得到了一棵帶有 CSS 屬性的樹
介紹了選擇器的幾種復(fù)合結(jié)構(gòu)應(yīng)該如何實現(xiàn)
擴(kuò)展閱讀：從Chrome源碼看瀏覽器如何計算CSS
https://zhuanlan.zhihu.com/p/...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116087.html
摘要：選擇器匹配流程前進(jìn)一個選擇器按照來拆成數(shù)段，每當(dāng)滿足一段條件的時候，就前進(jìn)一段。后退選擇器的作用范圍，匹配到本標(biāo)簽的結(jié)束標(biāo)簽時作用范圍邊緣回退。 加載css 加載是異步，不會影響DOM樹的構(gòu)建，只是說在CSS沒處理好之前，構(gòu)建好的DOM并不會顯示出來 啟發(fā)：所以CSS不能太大，頁面一打開將會停留較長時間的白屏，所以把圖片/字體等轉(zhuǎn)成base64放到CSS里面是一種不太推薦的做法 ...
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對前端來說系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫直接處理掉了，不會讓上層應(yīng)用知曉。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要...
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對前端來說系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫直接處理掉了，不會讓上層應(yīng)用知曉。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要...
摘要：緊跟在后面的是請求頭，每行用冒號分隔名稱和值按下兩次回車，收到服務(wù)端回復(fù)響應(yīng)部分第一行被稱作，它也分為三個部分，協(xié)議和版本狀態(tài)碼和狀態(tài)文本。對前端來說系列的狀態(tài)碼是非常陌生的，原因是的狀態(tài)被瀏覽器庫直接處理掉了，不會讓上層應(yīng)用知曉。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要...
閱讀 2867·2021-11-22 11:56
閱讀 3568·2021-11-15 11:39
閱讀 913·2021-09-24 09:48
閱讀 773·2021-08-17 10:14
閱讀 1339·2019-08-30 15:55
閱讀 2766·2019-08-30 15:55
閱讀 1325·2019-08-30 15:44
閱讀 2794·2019-08-30 10:59
