CSS層次是Web開發中非常重要的概念之一，可以讓頁面元素有不同的表現形式。當瀏覽器解析HTML和CSS文件時，CSS層次規則可以決定哪個樣式將覆蓋其他樣式。

/* 假設我們有以下3個CSS規則 */
div {
color: blue;
}
#myID {
color: red;
}
.menu-item {
color: green;
}
/* 如果我們有以下HTML */
Hello World!
/* 那么顏色將是紅色，因為ID選擇器比類選擇器和元素選擇器具有更高的特異性，所以它將覆蓋其他兩個規則。 */

另一方面，如果我們刪除ID選擇器，那么顏色將是綠色，因為元素選擇器和類選擇器都比元素選擇器具有更高的特異性，所以它們將覆蓋元素規則。

/* 假設我們刪除ID選擇器 */
div {
color: blue;
}
.menu-item {
color: green;
}
/* 如果我們有以下HTML */
Hello World!
/* 那么顏色將是綠色。 */

在CSS層次中，最重要的一點是要理解如何計算選擇器的特異性。特異性指的是CSS規則的優先級，其中選擇器的數量越多，優先級越高。類似于ID選擇器的特殊情況，它比其他選擇器具有更高的特異性，可以覆蓋其他規則。

總之，在CSS層次中遵循特定的規則可以讓你更輕松地控制網頁布局和視覺效果。