CSS選中類的第一個元素

在CSS中，我們可以使用類選擇器來為特定的 HTML 元素添加樣式。而使用CSS選中類的第一個元素，我們可以為列表中的第一個元素單獨設置樣式，這在某些情況下非常有用。

使用:first-child偽類選擇器

可以使用:first-child偽類選擇器來選中類的第一個元素，下面是一個示例代碼：
ul li:first-child {
color: red;
}
這個代碼將會把UL列表中的第一個LI元素文本顏色設為紅色。需要注意的是，如果想要同時選擇多個類的第一個元素，可以使用多個選擇器，例如：
ul li:first-child,
ol li:first-child {
color: red;
}
這將會把有序列表和無序列表中的第一個LI元素文本顏色都設為紅色。

使用:nth-child()偽類選擇器

除了使用:first-child偽類選擇器，我們還可以使用:nth-child()偽類選擇器來選中類的第一個元素。下面是一個示例代碼：
ul li:nth-child(1) {
color: red;
}
這個代碼也將會把UL列表中的第一個LI元素文本顏色設為紅色。需要注意的是，和:first-child不同的是，:nth-child()可以選中指定位置的元素，例如:
ul li:nth-child(2) {
color: blue;
}
這個代碼將會把UL列表中的第二個LI元素的文本顏色設為藍色。

總結

選擇類的第一個元素是CSS中的常見操作，可以使用:first-child偽類選擇器或者:nth-child()偽類選擇器來實現。如果需要同時選擇多個元素，可以使用多個選擇器。這些操作都能幫助我們更方便地控制HTML元素的樣式。