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