在CSS中，我們可以使用各種選擇器來(lái)選擇頁(yè)面中的元素，如果你想選擇***個(gè)孩子，可以使用:first-child偽類來(lái)實(shí)現(xiàn)。
選擇***個(gè)孩子的方法
1、使用:first-child偽類
你可以使用:first-child偽類來(lái)選擇一個(gè)元素的***個(gè)孩子，如果你想選擇每個(gè)div元素的***個(gè)p孩子，你可以這樣寫：
```css
div > p:first-child {
color: red;
}
```
這個(gè)規(guī)則會(huì)把每個(gè)div元素的***個(gè)p孩子的文字顏色設(shè)置為紅色。
2、使用:first-of-type偽類
除了:first-child，CSS還提供了:first-of-type偽類，它可以選擇某個(gè)元素在其兄弟元素中的***個(gè)。
```css
div > p:first-of-type {
color: blue;
}
```
這個(gè)規(guī)則會(huì)把每個(gè)div元素的***個(gè)p孩子的文字顏色設(shè)置為藍(lán)色。
示例代碼
下面是一個(gè)HTML頁(yè)面示例，展示如何使用CSS選擇***個(gè)孩子：
<!DOCTYPE html>
<html>
<head>
<style>
div > p:first-child {
color: red;
}
div > p:first-of-type {
color: blue;
}
</style>
</head>
<body>
<div>
<p>我是***個(gè)孩子，顏色應(yīng)該是紅色。</p>
<p>我是第二個(gè)孩子，顏色應(yīng)該是藍(lán)色。</p>
</div>
<div>
<p>我是***個(gè)孩子，顏色應(yīng)該是紅色。</p>
<p>我是第二個(gè)孩子，顏色應(yīng)該是藍(lán)色。</p>
</div>
</body>
</html>在這個(gè)示例中，每個(gè)div元素的***個(gè)p孩子的文字顏色被設(shè)置為紅色，而第二個(gè)孩子的文字顏色被設(shè)置為藍(lán)色，通過(guò)使用不同的偽類，我們可以靈活地選擇頁(yè)面中的元素，并應(yīng)用不同的樣式規(guī)則。
