如何在CSS中嵌套層級？

我們可以把嵌套的層級看作一個大層包小層的結構。通常情況下，我們會在一個大的容器中包含多個小的容器。要在CSS中創建這樣的層級結構，我們需要遵循幾個步驟：

第一步：設置父級容器

首先，我們需要定義一個父級容器，這個容器將包含我們所有的子級容器。在定義父級容器時，我們通常使用class或ID來命名它，如下所示：

.container {
/* 父級容器的CSS樣式 */
}

第二步：設置子級容器

在父容器中我們可以定義任意數量的子容器，每個子容器用一個選擇器表示，選擇器前面加上父容器的選擇器即可。子容器選擇器使用空格作為父級容器選擇器和子級容器選擇器之間的連接符，如下所示：

.container .child {
/* 子級容器的CSS樣式 */
}

第三步：設置孫級容器

如果你需要在子級容器內定義更深層次的容器，則需要繼續使用父容器選擇器和子容器選擇器的方式定義孫級容器，如下所示：

.container .child .grandchild {
/* 孫級容器的CSS樣式 */
}

第四步：應用CSS樣式

通過以上步驟，我們已經創建了嵌套的層級結構，現在只需要使用CSS去樣式化它們即可。在以上定義的每個選擇器中，我們可以設置不同的CSS屬性，如背景色、字體大小、行高等。以下是一個完整的CSS示例代碼：

.container {
background-color: #f2f2f2;
padding: 10px;
}
.container .child {
background-color: #fff;
padding: 10px;
margin-top: 10px;
}
.container .child .grandchild {
background-color: #ccc;
padding: 10px;
margin-top: 10px;
}

以上代碼定義了一個父容器（.container）和兩個子容器（.child和.grandchild）。每個容器的背景色和填充（padding）屬性都不同。父容器和子容器之間設置了一個margin-top值，以便在它們之間保留一些空間。