在HTML和CSS中，層級是指元素之間的父子關系。例如，一個 div 元素內有另一個 div 元素，那么第二個 div 元素是第一個 div 元素的子元素。在 CSS 中，我們可以使用層級選擇器來選取這些元素。

CSS 中的層級是通過 CSS 選擇器來實現的。選擇器可以按照每個元素的標簽名、類名、ID、屬性等來進行選擇。如果多個選擇器符合相同的元素，那么CSS將會使用層級關系來決定哪一個屬性會被應用。為了控制應用規則，CSS使用了優先級的概念。

優先級，簡單而言，就是用來決定哪個樣式規則將會被應用。它是根據選擇器的特定組合來確定的。因此，一個選擇器比另一個選擇器具有更高的優先級，那么被該選擇器選擇的元素將會使用該選擇器所規定的樣式。

/*使用標簽名作為選擇器*/
p {
color: red;
}
/*使用類名作為選擇器*/
.title {
color: blue;
}
/*使用ID作為選擇器*/
#content {
color: green;
}
/*使用行內樣式*/
層級樣式

這些選擇器按照CSS的層級關系進行排序，選擇器的優先級定義如下：

• 在計算規則的優先級時，優先級最高的是行內樣式，因為它們在每個元素中被直接聲明。
• 其次，ID選擇器具有更高的優先級，因為它們指定了唯一的元素。
• 類選擇器和標簽選擇器共享相同的優先級，并且通常是相對的深入順序決定的。
• 最后，通用選擇器的優先級最低。

層級關系也可以用于選擇器組合中。例如，元素可以通過其祖先元素來選擇。下面的選擇器將選擇具有 parent 元素子元素 div 的所有 p 元素：

.parent div p {
color: red;
}

這意味著 CSS 嘗試將匹配的規則應用到給定的元素，如果存在多個規則，CSS 會使用優先級規則來決定應用哪個規則。

CSS層級效果的原理非常簡單，但是它可以幫助你創建出漂亮的頁面和應用。通過理解它，你可以更好地掌握 CSS 的運用技巧。