層疊布局（Cascading Style Sheets，簡稱 CSS）是一種用來描述網頁內容在瀏覽器中顯示效果的語言。其中層疊指的是多種樣式疊加在一個元素上時按照一定規則進行優先級判斷，從而決定最終的樣式。本文主要介紹層疊布局中的各種選擇器和優先級計算規則。

首先介紹 CSS 中最基礎的選擇器——標簽選擇器。標簽選擇器是通過 HTML 標簽名來選中頁面中的元素的，例如：

p {
color: red;
}

上述代碼會選中 HTML 中所有的 <p> 標簽，并將它們的文字顏色設置為紅色。標簽選擇器的優先級最低，因此它通常用來設置頁面中大部分元素共同的樣式。

接下來是類選擇器。類選擇器是通過 HTML 中元素的 class 屬性來選中特定的元素的。一個元素可以有多個 class，類名稱之間用空格分隔。例如：

.className {
font-size: 16px;
}

上述代碼會選中 HTML 中所有具有 class="className" 屬性的元素，并將它們的字體大小設置為 16px。類選擇器的優先級比標簽選擇器高，但比 ID 選擇器低。

再來看 ID 選擇器。ID 選擇器是通過 HTML 中元素的 id 屬性來選中特定的元素的。一個 HTML 文檔中每個 id 只能用一次，因此相比于 class，id 更加獨特。例如：

#idName {
background-color: yellow;
}

上述代碼會選中 HTML 中具有 id="idName" 屬性的元素，并將它們的背景顏色設置為黃色。ID 選擇器的優先級最高，它所定義的樣式永遠都會被應用。

在實際的使用中，通常會使用上述選擇器的組合來選中具體的元素，例如：

div .className#idName {
font-style: italic;
}

上述代碼會選中 HTML 中所有的 <div> 元素的后代元素中 class="className" 且具有 id="idName" 屬性的元素，并將它們的字體樣式設置為斜體。在這個選擇器中，首先是標簽選擇器 div，然后是空格表示后代選擇器，接著是類選擇器 className，最后是 ID 選擇器 idName。這個選擇器的優先級跟隨優先級計算規則進行計算。