果我們想在 HTML 元素中設置 CSS 樣式，則需要通過 CSS 選擇器進行控制。換句話說，CSS 選擇器就是用于指向需要添加 CSS 樣式的標簽，讓 CSS 樣式知道自己需要作用到那個標簽上去。

CSS 的繼承性是指被包在內部的標簽將擁有外部標簽的樣式性，即子元素可以繼承父元素的屬性。

以下分別介紹了幾種常用的選擇器與其可繼承的屬性。

常用的 CSS 選擇器有：

id 選擇器

我們通過設置標簽的 id 屬性來設置id選擇器。CSS 中 id 選擇器以 # 來定義。如以下則是設置 id 為“box”的 CSS 樣式。為 div 添加一個高度為 100px，寬度為 100px，背景顏色為紅色的樣式。

類選擇器

常用的選擇器還有類選擇器。類選擇器通過設置標簽的 class 屬性去設置樣式。CSS 中 class 選擇器以 . 來定義。如以下則是設置class 為“box”的 CSS 樣式。為div添加一個高度為 100px，寬度為 100px，背景顏色為藍色的樣式。

標簽選擇器

標簽選擇器是為某一類標簽設置 CSS 樣式。在 CSS 中直接以標簽名設置樣式。如以下是設置 div 的 CSS 樣式。給 div 加上一個高度為 100px,寬度為 100px,背景顏色為粉色的樣式。

內聯選擇器

我們也可以直接在標簽內寫 CSS 代碼。通過加上 style 屬性，就可以在 style 內添加 CSS 樣式了。

可繼承的屬性：

CSS 中可繼承的屬性有以下幾種。

字體系列屬性

文本系列屬性

元素可見性

表格布局屬性

列表屬性

生成內容屬性

光標屬性

頁面樣式屬性

聲音樣式屬性

以上就是編程獅(w3cschool.cn)小編為你整理的 CSS 選擇器及其繼承屬性的總結。希望可以幫到你~

前面一篇文章：「高頻面試題」瀏覽器從輸入url到頁面展示中間發生了什么 中，我們有對瀏覽器的渲染流程做了一個概括性的介紹，今天這篇文章我們將深入學習這部分內容。

對于很多前端開發來說，平常做工主要專注于業務開發，對瀏覽器的渲染階段可能不是很了解。實際上這個階段很重要，了解瀏覽器的渲染過程，能讓我們知道我們寫的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個頁面的，在頁面性能優化的時候有相應的解決思路。

我們先來看一個問題：

HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的？

如果你回答不上來，那就往下看吧。

按照渲染的時間順序，渲染過程可以分為下面幾個子階段：構建DOM樹、樣式計算、布局階段、分層、柵格化和合成顯示。

下面詳細看下每個階段都做了哪些事情。

1. 構建DOM樹

HTML文檔描述一個頁面的結構，但是瀏覽器無法直接理解和使用HTML，所以需要通過HTML解析器將HTML轉換成瀏覽器能夠理解的結構——DOM樹。

HTML文檔中所有內容皆為節點，各節點之間有層級關系，彼此相連，構成DOM樹。

構建過程：讀取HTML文檔的字節(Bytes)，將字節轉換成字符(Chars)，依據字符確定標簽(Tokens)，將標簽轉換成節點(Nodes)，以節點為基準構建DOM樹。參考下圖：

打開Chrome的開發者工具，在控制臺輸入 document 后回車，就能看到一個完整的DOM樹結構，如下圖所示：

在控制臺打印出來的DOM結構和HTML內容幾乎一樣，但和HTML不同的是，DOM是保存在內存中的樹狀結構，可以通過JavaScript來查詢或修改其內容。

2. 樣式計算

樣式計算這個階段，是為了計算出DOM節點中每個元素的表現樣式。

2.1 解析CSS

CSS樣式可以通過下面三種方式引入：

• 通過link引用外部的CSS文件
• style 標簽內的CSS
• 元素的style屬性內嵌的CSS

和HTML一樣，瀏覽器無法直接理解純文本的CSS樣式，需要通過CSS解析器將CSS解析成 styleSheets 結構，也就是我們常說的 CSSOM樹。

styleSheets結構同樣具備查詢和修改功能：

document.styleSheets

2.2 屬性值標準化

屬性值標準化看字面意思有點不好理解，我們通過下面一個例子來看看什么是屬性值標準化：

在寫CSS樣式的時候，我們在設置color屬性值的時候，經常會用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉換成渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。

white標準化后的值為 rgb(255, 255, 255)

2.3 計算DOM樹中每個節點的樣式

完成樣式的屬性值標準化后，就需要計算每個節點的樣式屬性，這個階段CSS有兩個規則我們需要清楚：

• 繼承規則：每個DOM節點都包含有父節點的樣式
• 層疊規則：層疊是CSS的一個基本特征，是一個定義了如何合并來自多個源的屬性值的算法。

樣式計算階段是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。

該階段最終輸出的內容是每個DOM節點的樣式，并被保存在 ComputedStyle 的結構中。

3. 布局階段

經過上面的兩個步驟，我們已經拿到了DOM樹和DOM樹中元素的樣式，接下來需要計算DOM樹中可見元素的幾何位置，這個計算過程就是布局。

3.1 創建布局樹

在DOM樹中包含了一些不可見的元素，例如 head 標簽，設置了 display:none 屬性的元素，所以我們需要額外構建一棵只包含可見元素的布局樹。

構建過程：從DOM樹的根節點開始遍歷，將所有可見的節點加到布局樹中，忽略不可見的節點。

3.2 布局計算

到這里我們就有了一棵構建好的布局樹，就可以開始計算布局樹節點的坐標位置了。從根節點開始遍歷，結合上面計算得到的樣式，確定每個節點對象在頁面上的具體大小和位置，將這些信息保存在布局樹中。

布局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。

4. 分層

現在我們已經有了布局樹，也知道了每個元素的具體位置信息，但是還不能開始繪制頁面，因為頁面中會有像3D變換、頁面滾動、或者用 z-index 進行z軸排序等復雜效果，為了更方便實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹(LayerTree)。

在Chrome瀏覽器中，我們可以打開開發者工具，選擇 Elements-Layers 標簽，就可以看到頁面的分層情況，如下圖所示：

瀏覽器的頁面實際上被分成了很多圖層，這些圖層疊加后合成了最終的頁面。

到這里，我們構建了兩棵樹：布局樹和圖層樹。下面我們來看下這兩棵樹之間的關系：

正常情況下，并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的圖層，那么這個節點就從屬于父節點的圖層。

那節點要滿足什么條件才會被提升為一個單獨的圖層？只要滿足下面其中一個條件即可：

• 擁有層疊上下文屬性的元素會被提升為單獨的一個圖層
• 需要剪裁(clip)的地方也會被創建為圖層。

5. 圖層繪制

構建好圖層樹之后，渲染引擎就會對圖層樹中的每個圖層進行繪制。

渲染引擎實現圖層繪制，會把一個圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個繪制列表。

6. 柵格化(raster)操作

繪制一個圖層時會生成一個繪制列表，這只是用來記錄繪制順序和繪制指令的列表，實際上繪制操作是由渲染引擎中的合成線程來完成的。

通過下圖來看下渲染主線程和合成線程之間的關系：

當圖層的繪制列表準備好后，主線程會把該繪制列表提交給合成線程，合成線程開始工作。

首先合成線程會將圖層劃分為圖塊(tile)，圖塊大小通常是 256256 或者 512512。

然后合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。而圖塊是柵格化執行的最小單位。渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內執行的，運行方式如下圖所示：

7. 合成和顯示

一旦所有圖塊都被光柵化，合成線程就會生成一個繪制圖塊的命令——“DrawQuad”，然后將該命令提交給瀏覽器進程。

瀏覽器進程里面有一個名字叫做 viz 的組件，用來接收合成線程發過來的 DrawQuad 命令，然后根據命令執行。 DrawQuad 命令，將其頁面內容繪制到內存中，最后再將內存顯示在屏幕上。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

8. 總結

一個完整的渲染流程可以總結如下：

• 1、渲染進程將HTML內容轉換為瀏覽器能夠讀懂的DOM樹結構。
• 2、渲染引擎將CSS樣式表轉化為瀏覽器可以理解的styleSheets，計算出DOM節點的樣式。
• 3、創建布局樹，并計算所需元素的布局信息。
• 4、對布局樹進行分層，并生成分層樹。
• 5、為每個圖層生成繪制列表，并將其提交到合成線程。
• 6、合成線程將圖層分圖塊，并柵格化將圖塊轉換成位圖。
• 7、合成線程發送繪制圖塊命令給瀏覽器進程。瀏覽器進程根據指令生成頁面，并顯示到顯示器上。

渲染過程中還有兩個我們經常聽到的概念：重排和重繪。在這篇文章中就不細說了，下一篇文章再詳細介紹。