CSS選中類的第一個(gè)元素

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

使用:first-child偽類選擇器

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

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

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

總結(jié)

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