CSS是網頁設計中非常重要的一部分，可以實現豐富的效果。子嵌套是CSS中的一種常用技巧，可以讓我們更好的組織代碼。下面我們就來了解一下CSS子嵌套的寫法。 首先，我們來看一個常見的網頁布局。假設我們要實現一個頁面，它包含一個頂部導航欄、一個左側菜單欄和一個主體內容區。我們可以這樣編寫HTML代碼： `````` 接下來，我們需要為這個頁面添加CSS樣式。我們可以這樣編寫CSS代碼： ```css .header { background-color: #333; color: #fff; height: 60px; } .header .nav { list-style: none; margin: 0; padding: 0; } .header .nav li { display: inline-block; margin-right: 20px; } .sidebar { background-color: #ddd; width: 200px; float: left; } .sidebar .menu { list-style: none; margin: 0; padding: 0; } .sidebar .menu li { margin-bottom: 10px; } .content { margin-left: 220px; padding: 20px; } ``` 可以看到，我們在CSS中使用了子嵌套的技巧。比如，`.header .nav`表示選擇`.header`下的`.nav`元素，`.header .nav li`表示選擇`.header`下的`.nav`元素中的所有`li`元素。同理，`.sidebar .menu`表示選擇`.sidebar`下的`.menu`元素，`.sidebar .menu li`表示選擇`.sidebar`下的`.menu`元素中的所有`li`元素。 這樣做有什么好處呢？首先，代碼的可讀性更好。我們可以根據元素的嵌套關系來組織CSS代碼。其次，CSS代碼也更加靈活。假設我們需要修改菜單欄中每個元素的字體顏色，只需要在`.sidebar .menu li`中添加`color: red;`即可，不會影響其他地方的樣式。 總之，CSS子嵌套是我們在網頁設計中經常使用的一種技巧，它可以幫助我們更好地組織和管理CSS代碼，使頁面更加美觀、易讀、易于維護。