HOW CSS works ?

這篇文章解釋了瀏覽器如何將HTML轉換爲文檔對象模型（DOM）、CSS是如何應用到DOM的各個部分。

1. 理解

document：就是使用標記語言（如HTML、XML）架構的文本文件，向用戶呈現一個document意味着把這個document轉換成用戶可以理解的格式。

2.CSS如何工作

當瀏覽器展示一個document時，它必須合併文檔內容和樣式信息。有這樣的兩個階段：

1. 瀏覽器把HTML和CSS轉換成DOM（文檔對象模型），DOM表示計算機內存中的文檔，它合併了文檔的內容和樣式。

2. 瀏覽器呈現DOM的內容

3.關於DOM

DOM有一個樹狀結構，HTML中的每一個元素、屬性、文本都成爲樹狀結構中的節點，這些節點通過他們和其他DOM節點的關係被定義。一些節點是父節點，一些節點是子節點。
因爲DOM是CSS和文檔內容融匯的地方，所以理解DOM幫你設計，調試，維護你的CSS。

使用代碼加強理解：

<p>
讓我們使用:
<span>樣式表</span>
<span>好嗎？</span>
</p>

如上所示，在DOM中，p元素對應的節點（node）是父節點，其子節點是文本節點和span元素對應的節點，此外，span元素對應的節點也是父節點，其子節點是文本節點（對，文本內容也是一種節點）。
瀏覽器就是通過這樣的方式來解釋HTML文檔的——–它渲染了上面的DOM樹，然後這樣輸出：

讓我們使用樣式表好嗎？

如果我們使用CSS對其進行渲染，CSS代碼如下：

span {
  border: 1px solid black;
  background-color: lime;
}

瀏覽器先解析HTML，並以此創建一個DOM樹，然後再解析CSS，將CSS中的規則應用於DOM中的節點。

原文地址：
https://developer.mozilla.org/enUS/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works