CSS是前端開發(fā)中非常重要的一門技術(shù)，可以控制網(wǎng)頁的樣式和布局。在CSS中，經(jīng)常會出現(xiàn)多個div組成的嵌套結(jié)構(gòu)，這些結(jié)構(gòu)可以通過CSS代碼進行優(yōu)雅的樣式設(shè)置。

下面是一個簡單的多個div嵌套結(jié)構(gòu)的示例：

<div class="wrapper">
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="article"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>

上面的結(jié)構(gòu)中，包含了一個wrapper容器，里面有一個header、content和footer組成的垂直布局。header中包含logo和nav這兩個橫向排列的子元素，content中包含article和sidebar這兩個垂直排列的子元素。

如何在CSS中對這些元素進行精細(xì)的樣式設(shè)置呢？一個常用的技巧是通過偽類來控制每個元素的狀態(tài)。比如，我們可以設(shè)置hover偽類來控制鼠標(biāo)懸停在某個元素上時的樣式：

.header {
background-color: #333;
height: 60px;
}
.header:hover {
background-color: #555;
}
.article {
background-color: #fff;
height: 400px;
}
.article:hover {
background-color: #eee;
}
.sidebar {
background-color: #ccc;
height: 400px;
}
.sidebar:hover {
background-color: #bbb;
}

在上面的CSS代碼中，我們分別設(shè)置了header、article和sidebar三個元素在hover狀態(tài)時的背景顏色，使整個頁面看起來更加美觀。

除了偽類外，我們還可以使用CSS選擇器來對每個元素的樣式進行設(shè)置。比如，以下代碼中的.descendant選擇器就可以選取每個wrapper容器下的子元素：

.wrapper div {
padding: 10px;
}
.header .logo {
width: 100px;
height: 60px;
background: url(logo.png);
}
.header .nav {
float: right;
margin-top: 20px;
}
.content {
display: flex;
}
.article {
flex-grow: 1;
}
.sidebar {
width: 200px;
}

上面的代碼中，我們分別對wrapper、header、content、article和sidebar五個元素進行了樣式設(shè)置，其中wrapper下的div元素使用了后代選擇器進行設(shè)置。

通過CSS代碼的設(shè)置，我們可以方便地控制多個div嵌套的網(wǎng)頁結(jié)構(gòu)，使網(wǎng)頁看起來更加優(yōu)美和整潔。