在CSS中，層級關系是非常重要的。當樣式發生沖突時，層級可以決定哪種樣式將被應用于元素。但是，有時候我們會犯一些層級錯誤，這會導致樣式無法應用正確的元素，從而使頁面布局混亂。

/* 錯誤的層級關系 */
.header {
background-color: blue;
}
nav {
background-color: green;
}
/* 正確的層級關系 */
header {
background-color: blue;
}
header nav {
background-color: green;
}

在上面的代碼中，我們設置了一個頂部導航欄，并試圖為其設置背景顏色。但是，我們使用了錯誤的層級關系，將樣式應用于了一個名為“nav”的元素，而不是正確的“header nav”元素。這導致樣式只應用于一個錯誤的元素，而不是我們想要的元素。

要避免這種情況發生，我們必須注意正確的層級關系。要組成正確的選擇器，我們可以使用子代選擇器或后代選擇器。現在，讓我們來看一下正確的層級關系：

header {
background-color: blue;
}
header nav {
background-color: green;
}

在上面的代碼中，我們使用了子代選擇器，將樣式應用于正確的元素。這樣，背景顏色將應用于整個導航欄，而不僅僅是一個錯誤的元素（如上面例子中的nav元素）。

在CSS中，正確的層級關系是非常重要的。只要我們遵循正確的選擇器語法，我們就可以避免樣式沖突，并確保樣式被應用于正確的元素，從而創建漂亮而易于維護的頁面布局。