CSS（層疊樣式表）是一種用于定義網頁內容樣式的語言。在網頁設計中，使用div元素來劃分頁面中的不同部分，并為之應用不同的樣式。在CSS中，我們可以針對div的子元素進行樣式設置，以實現更精細的布局和設計效果。
子選擇器
CSS提供了子選擇器（Child Selector），用于選擇某個元素的直接子元素。子選擇器使用>符號來表示，用于選取指定元素的直接子元素。
示例1：應用于子元素的樣式
<code>
/* 選擇div的直接子元素p，并設置顏色為紅色 */
div>p {
color: red;
}
</code>在上述示例中，選擇器div>p選擇了div元素的直接子元素p，并為這些p元素設置了顏色為紅色。這樣就能夠將特定樣式僅應用于div的直接子元素p，而不影響其他子元素。
示例2：使用子選擇器實現導航菜單效果
<code>
/* 選擇div的直接子元素ul，并為其子元素li設置橫向排列樣式 */
div>ul {
list-style: none; /* 移除默認的列表樣式 */
padding: 0; /* 移除內邊距 */
display: flex; /* 設置橫向排列 */
}
<br>
/* 選擇div的直接子元素ul的子元素li，并設置間距和顏色 */
div>ul>li {
margin-right: 10px; /* 右側間距 */
color: blue; /* 文字顏色為藍色 */
}
<br>
/* 選擇div的直接子元素ul的最后一個子元素li，并移除右側間距 */
div>ul>li:last-child {
margin-right: 0;
}
</code>上述示例中，我們使用子選擇器實現了一個導航菜單效果。，選擇器div>ul選中div的直接子元素ul，并對其應用了靈活布局樣式，使其子元素li橫向排列。然后，選擇器div>ul>li選中div的直接子元素ul的子元素li，并為這些li元素設置了間距和顏色樣式。最后，選擇器div>ul>li:last-child選中div的直接子元素ul的最后一個子元素li，并移除其右側間距。
偽元素子集
在CSS中，除了直接選擇子元素外，我們還可以使用偽元素來選擇元素的子集。偽元素表示網頁元素中不存在實際的HTML標記，而是通過CSS樣式進行添加和控制。
示例3：使用偽元素選擇子集
<code>
/* 選擇div的第一個子元素，并設置背景顏色為灰色 */
div::first-child {
background-color: gray;
}
<br>
/* 選擇div的最后一個子元素，并設置背景顏色為黑色 */
div::last-child {
background-color: black;
}
<br>
/* 選擇div的第三個子元素，并設置文本顏色為白色 */
div::nth-child(3) {
color: white;
}
</code>在上述示例中，我們使用了偽元素來選擇div的特定子元素。選擇器div::first-child選中了div的第一個子元素，并將其背景顏色設為灰色。選擇器div::last-child選中了div的最后一個子元素，并將其背景顏色設為黑色。選擇器div::nth-child(3)選中了div的第三個子元素，并將其文本顏色設為白色。
示例4：使用偽元素創建特殊效果
<code>
/* 選擇div的直接子元素，并在其前方添加特殊效果 */
div>::before {
content: "★"; /* 設置偽元素的內容為星號 */
font-size: 20px; /* 設置偽元素的字體大小 */
color: red; /* 設置偽元素的顏色為紅色 */
}
</code>上述示例中，我們使用偽元素選擇div的直接子元素，并通過設置::before偽元素的樣式，在子元素的前方添加了一個特殊效果。通過設置content屬性為星號、font-size屬性為20像素、color屬性為紅色，我們創建了一個紅色、大小為20像素的星號在子元素前方。
通過子選擇器和偽元素選擇器，我們可以更加靈活地控制和樣式化網頁中的div子集。這些功能給予了我們更多的設計自由，可以創建出更精美的頁面布局和效果。