網頁是如何解析CSS的？首先，當瀏覽器打開一個網頁時，它會先讀取HTML代碼，然后創建文檔對象模型（DOM）。DOM是一種樹形結構，用于描述文檔的層次結構，包括HTML元素、屬性和文本內容。

接著，瀏覽器會讀取CSS代碼，并創建另一個樹形結構——層疊樣式表（CSSOM）。CSSOM包括選擇器、屬性和值，它定義了如何渲染HTML元素，如何應用樣式和排版。

一旦DOM和CSSOM都被創建，瀏覽器會將它們合并成一個渲染樹。渲染樹是由元素的可視化表現（如大小、顏色、邊框等）構成的，它決定了每個元素在屏幕上的位置和外觀。

在創建渲染樹的過程中，瀏覽器會按照CSS選擇器的優先級和特定度量規則來確定哪些屬性將應用于每個元素。如果兩個或多個選擇器都試圖應用相同的屬性，瀏覽器將按照優先級和特定權重來決定哪個樣式表應該生效。

一旦渲染樹被創建，瀏覽器會在屏幕上繪制每一個元素，并將它們放置在正確的位置。這個過程依賴于一些算法，如盒模型（box model）和浮動（float）等，它們都是從W3C標準中定義的。

總之，網頁的樣式解析是通過DOM和CSSOM的合并、選擇器優先級和繪圖算法來完成的。這個過程對于Web開發者來說非常重要，因為它需要使用正確的選擇器方式和樣式規則來創建一個可被正確解析和渲染的網頁。

/* 以下代碼演示了CSS選擇器的層次和優先級： */
/* 權重為1（元素選擇器） */
p {
color: blue;
}
/* 權重為10（類選擇器） */
.my-paragraph {
color: green;
}
/* 權重為100（ID選擇器） */
#my-paragraph {
color: red;
}
/* 權重為1000（行內樣式，!important） */
p {
color: orange !important;
}
/* 層次選擇器（權重為較高的綜合值） */
.container .my-paragraph {
color: purple;
}