CSS 選擇某個子元素

CSS 是網頁美化的重要一環，其中選擇器則是其使用的重要一部分。而其中選擇某個子元素則是我們使用中比較熟悉和使用頻率較高的一種操作。本文將主要針對 CSS 選擇某個子元素進行講解。

1. 子元素選擇器（用于選擇某個元素的直接子元素）

子元素選擇器可以用于選擇指定元素的直接子元素，其符號為“>”，如下的代碼所示：

ul >li {
color: red;
}

在上述的代碼中，“ul >li” 表示選擇 ul 元素中的直接子元素 li，使其變為紅色。

2. 后代元素選擇器（用于選擇某個元素的所有后代元素）

后代元素選擇器可以用于選擇指定元素的所有后代元素，其符號為“ ”（空格），如下的代碼所示：

ul li {
color: red;
}

在上述的代碼中，“ul li” 表示選擇 ul 元素中的所有后代元素 li，使其變為紅色。

3. 篩選選擇器

篩選選擇器可以用于選擇符合特定條件的元素。其中非常常用的有“:first-child”、“:last-child”、“:nth-child(n)”等。

:first-child {
color: red;
}

在上述代碼中，“:first-child”表示選擇某元素下的第一個子元素，使其變為紅色。

4. ID 選擇器和類選擇器

ID 選擇器和類選擇器可以用于選擇具有特定 class 和 id 的元素。

#header {
color: red;
}

在上述代碼中，“#header”表示選擇具有 id 為“header”的元素，使其變為紅色。

.red {
color: red;
}

在上述代碼中，“.red”表示選擇具有 class 為“red”的元素，使其變為紅色。