資訊專欄INFORMATION COLUMN
摘要：三操作過程首先，須把規(guī)則進(jìn)行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。
筆記說明
重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：kaimo313@foxmail.com。一、概括
本文主要聊聊瀏覽器是如何把 CSS 規(guī)則應(yīng)用到節(jié)點(diǎn)上，并給這棵樸素的 DOM 樹添加上 CSS 屬性的。二、CSS構(gòu)建過程
構(gòu)建 DOM 的過程是：從父到子，從先到后，一個(gè)一個(gè)節(jié)點(diǎn)構(gòu)造，并且掛載到 DOM 樹上的，那么這個(gè)過程中，依次拿到上一步構(gòu)造好的元素，去檢查它匹配到了哪些規(guī)則，再根據(jù)規(guī)則的優(yōu)先級，做覆蓋和調(diào)整。2.1、選擇器
空格: 后代，選中它的子節(jié)點(diǎn)和所有子節(jié)點(diǎn)的后代節(jié)點(diǎn)
>: 子代，選中它的子節(jié)點(diǎn)
+：直接后繼選擇器，選中它的下一個(gè)相鄰節(jié)點(diǎn)
~：后繼，選中它之后所有的相鄰節(jié)點(diǎn)
||：列，選中表格中的一列
選擇器有個(gè)特點(diǎn)，那就是選擇器的出現(xiàn)順序，必定跟構(gòu)建 DOM 樹的順序一致。這是一個(gè) CSS 設(shè)計(jì)的原則，即保證選擇器在 DOM 樹構(gòu)建到當(dāng)前節(jié)點(diǎn)時(shí)，已經(jīng)可以準(zhǔn)確判斷是否匹配，不需要后續(xù)節(jié)點(diǎn)信息。
接下來看一下操作過程。
三、操作過程首先，須把 CSS 規(guī)則進(jìn)行處理。作為一門語言，CSS 需要先經(jīng)過詞法分析和語法分析，變成計(jì)算機(jī)能夠理解的結(jié)構(gòu)。將其抽象成一棵可用的抽象語法樹。
一個(gè) compound-selector 是檢查一個(gè)元素的規(guī)則，而一個(gè)復(fù)合型選擇器，則是由數(shù)個(gè) compound-selector 通過前面講的符號連接起來的。
3.1、后代選擇器 “空格”后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。
a#b .cls {
width: 100px;
}
當(dāng)匹配 a#b 的元素時(shí)，才會開始檢查它所有的子代是否匹配 .cls。
后退的情況：
1 2 3
這段代碼里有 cls 類的有有兩個(gè) span 標(biāo)簽，所以為了防止第三個(gè) span 才不會被選中，當(dāng)遇到 時(shí)，必須使得規(guī)則 a#b .cls 回退一步。
3.2、后繼選擇器“ ~ ”.cls~* {
border:solid 1px green;
}
1 2 3 4 5
上面代碼可以看出 .cls 選中了span2，它的后繼應(yīng)該是 span3，span4是span3的子節(jié)點(diǎn)不應(yīng)被選中， span5是后繼應(yīng)該被選中。
從上面我們可以得出一個(gè)結(jié)論：后繼節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)父元素相同是充分必要條件。
3.3、子代選擇器 “>”div>.cls {
border:solid 1px green;
}
1 2 3 4 5
當(dāng) DOM 樹構(gòu)造到 div 時(shí)，匹配了 CSS 規(guī)則的第一段，激活后面的 .cls 選擇條件，并且指定父元素必須是當(dāng)前 div。于是span2就會被選中。
3.4、直接后繼選擇器 “+”直接后繼選擇器只對唯一一個(gè)元素生效，不需要像前面幾種一樣反復(fù)激活和關(guān)閉規(guī)則。3.5、列選擇器 “ || ”
列選擇器比較特別，它是專門針對表格的選擇器。3.6、其他 3.6.1、逗號分隔
/* 這里用,隔開，可以當(dāng)作兩條規(guī)則處理 */
a#b, .cls {
}
a#b {
}
.cls {
}
3.6.2、選擇器重合
可以使用樹形結(jié)構(gòu)來進(jìn)行一些合并，來提高效率。
#a .cls {
}
#a span {
}
#a>span {
}
上面選擇器可以構(gòu)建成一棵樹
a
< 空格 >.cls
< 空格 >span
>span
個(gè)人總結(jié)之前學(xué)習(xí)css的時(shí)候沒有想過是什么實(shí)現(xiàn)的，只知道怎么用，這樣寫能實(shí)現(xiàn)效果就行了，學(xué)習(xí)winter專欄之后，認(rèn)識更深了，有些問題直接本質(zhì)可能對你會影響更大。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109446.html
摘要：三操作過程首先，須把規(guī)則進(jìn)行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，...
摘要：三操作過程首先，須把規(guī)則進(jìn)行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點(diǎn)的所有子節(jié)點(diǎn)，因此規(guī)則是在匹配到本標(biāo)簽的結(jié)束標(biāo)簽時(shí)回退。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，...
摘要：事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個(gè)由標(biāo)簽嵌套而成的樹形結(jié)構(gòu)，因此，也是使用樹形的對象模型來描述一個(gè)文檔。節(jié)點(diǎn)的寫法三是樹繼承關(guān)系的根節(jié)點(diǎn)。七表示一個(gè)上的范圍，這個(gè)范圍是以文字為最小單位的。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的...
摘要：事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個(gè)由標(biāo)簽嵌套而成的樹形結(jié)構(gòu)，因此，也是使用樹形的對象模型來描述一個(gè)文檔。節(jié)點(diǎn)的寫法三是樹繼承關(guān)系的根節(jié)點(diǎn)。七表示一個(gè)上的范圍，這個(gè)范圍是以文字為最小單位的。 筆記說明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的...
閱讀 1914·2023-04-26 01:56
閱讀 3110·2021-11-18 10:02
閱讀 3049·2021-09-09 11:35
閱讀 1283·2021-09-03 10:28
閱讀 3407·2019-08-29 18:36
閱讀 2846·2019-08-29 17:14
閱讀 832·2019-08-29 16:10
閱讀 1616·2019-08-26 13:45
