国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

重學前端學習筆記（十三）--瀏覽器工作解析（三）

trigkit4 / 607人閱讀

摘要：三操作過程首先，須把規(guī)則進行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點的所有子節(jié)點，因此規(guī)則是在匹配到本標簽的結(jié)束標簽時回退。

筆記說明 
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，郵箱：kaimo313@foxmail.com。
一、概括 
本文主要聊聊瀏覽器是如何把  CSS 規(guī)則應用到節(jié)點上，并給這棵樸素的 DOM 樹添加上 CSS 屬性的。
二、CSS構(gòu)建過程 
構(gòu)建 DOM 的過程是：從父到子，從先到后，一個一個節(jié)點構(gòu)造，并且掛載到 DOM 樹上的，那么這個過程中，依次拿到上一步構(gòu)造好的元素，去檢查它匹配到了哪些規(guī)則，再根據(jù)規(guī)則的優(yōu)先級，做覆蓋和調(diào)整。
2.1、選擇器

空格: 后代，選中它的子節(jié)點和所有子節(jié)點的后代節(jié)點

>: 子代，選中它的子節(jié)點

+：直接后繼選擇器，選中它的下一個相鄰節(jié)點

~：后繼，選中它之后所有的相鄰節(jié)點

||：列，選中表格中的一列

選擇器有個特點，那就是選擇器的出現(xiàn)順序，必定跟構(gòu)建 DOM 樹的順序一致。這是一個 CSS 設(shè)計的原則，即保證選擇器在 DOM 樹構(gòu)建到當前節(jié)點時，已經(jīng)可以準確判斷是否匹配，不需要后續(xù)節(jié)點信息。

接下來看一下操作過程。

三、操作過程 
首先，須把 CSS 規(guī)則進行處理。作為一門語言，CSS 需要先經(jīng)過詞法分析和語法分析，變成計算機能夠理解的結(jié)構(gòu)。將其抽象成一棵可用的抽象語法樹。

一個 compound-selector 是檢查一個元素的規(guī)則，而一個復合型選擇器，則是由數(shù)個 compound-selector 通過前面講的符號連接起來的。

3.1、后代選擇器 “空格” 
后代選擇器的作用范圍是父節(jié)點的所有子節(jié)點，因此規(guī)則是在匹配到本標簽的結(jié)束標簽時回退。
a#b .cls {
    width: 100px;
}

當匹配 a#b 的元素時，才會開始檢查它所有的子代是否匹配 .cls。

后退的情況：


    1
    2

3

這段代碼里有 cls 類的有有兩個 span 標簽，所以為了防止第三個 span 才不會被選中，當遇到 時，必須使得規(guī)則 a#b .cls 回退一步。

3.2、后繼選擇器“ ~ ” 
.cls~* {
    border:solid 1px green;
}

1
2

    3
    4

5

上面代碼可以看出 .cls 選中了span2，它的后繼應該是 span3，span4是span3的子節(jié)點不應被選中， span5是后繼應該被選中。

從上面我們可以得出一個結(jié)論：后繼節(jié)點和當前節(jié)點父元素相同是充分必要條件。

3.3、子代選擇器 “>” 
div>.cls {
    border:solid 1px green;
}

1
2

    3
    4

5

當 DOM 樹構(gòu)造到 div 時，匹配了 CSS 規(guī)則的第一段，激活后面的 .cls 選擇條件，并且指定父元素必須是當前 div。于是span2就會被選中。

3.4、直接后繼選擇器 “+” 
直接后繼選擇器只對唯一一個元素生效，不需要像前面幾種一樣反復激活和關(guān)閉規(guī)則。
3.5、列選擇器 “ || ” 
列選擇器比較特別，它是專門針對表格的選擇器。
3.6、其他 3.6.1、逗號分隔 
/* 這里用,隔開，可以當作兩條規(guī)則處理 */
a#b, .cls {

}
a#b {

}
.cls {

}
3.6.2、選擇器重合 
可以使用樹形結(jié)構(gòu)來進行一些合并，來提高效率。
#a .cls {

}
#a span {

}
#a>span {

}

上面選擇器可以構(gòu)建成一棵樹

a

< 空格 >.cls

< 空格 >span

>span

個人總結(jié)

之前學習css的時候沒有想過是什么實現(xiàn)的，只知道怎么用，這樣寫能實現(xiàn)效果就行了，學習winter專欄之后，認識更深了，有些問題直接本質(zhì)可能對你會影響更大。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/55047.html

相關(guān)文章

  • 重學前端學習筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過程首先，須把規(guī)則進行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點的所有子節(jié)點，因此規(guī)則是在匹配到本標簽的結(jié)束標簽時回退。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，...

    yintaolaowanzi 評論0 收藏0

  • 重學前端學習筆記（十三）--瀏覽器工作解析（三）

    摘要：三操作過程首先，須把規(guī)則進行處理。后代選擇器空格后代選擇器的作用范圍是父節(jié)點的所有子節(jié)點，因此規(guī)則是在匹配到本標簽的結(jié)束標簽時回退。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權(quán)請聯(lián)系我，...

    KitorinZero 評論0 收藏0

  • 重學前端學習筆記（二十三）--狹義的文檔對象DOM

    摘要：事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個由標簽嵌套而成的樹形結(jié)構(gòu)，因此，也是使用樹形的對象模型來描述一個文檔。節(jié)點的寫法三是樹繼承關(guān)系的根節(jié)點。七表示一個上的范圍，這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的...

    Guakin_Huang 評論0 收藏0

  • 重學前端學習筆記（二十三）--狹義的文檔對象DOM

    摘要：事件觸發(fā)和監(jiān)聽事件相關(guān)。文檔是一個由標簽嵌套而成的樹形結(jié)構(gòu)，因此，也是使用樹形的對象模型來描述一個文檔。節(jié)點的寫法三是樹繼承關(guān)系的根節(jié)點。七表示一個上的范圍，這個范圍是以文字為最小單位的。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的...

    wuaiqiu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<