CSS 列表是用來排列和顯示文本或圖像等元素的一種方式。在 CSS 中,我們可以使用<ul>
與<ol>
標簽來創建無序列表和有序列表。而列表項則是由<li>
標簽來定義的。
在某些情況下,我們希望選取列表中的特定項進行樣式設置。CSS 中提供了一個偽類選擇器:nth-child
,它可以選擇列表中的第 n 個子元素。
以下是:nth-child
的用法示例:
/* 選擇第 2 個列表項 */ li:nth-child(2) { background-color: yellow; } /* 選擇每 2 個列表項 */ li:nth-child(2n) { font-style: italic; } /* 選擇從第 3 個到倒數第 2 個列表項 */ li:nth-child(n+3):nth-last-child(n+2) { color: red; }
需要注意的是,:nth-child
選擇器是基于子元素順序的,而非實際內容。如果列表項中存在其他元素(例如嵌套的標簽),則要注意排除它們的影響,可以使用更精確的選擇器。
總而言之,:nth-child
選擇器是一個非常實用的 CSS 語法,在列表等場景中可以方便地定位和修改特定的元素。但是,合理使用選擇器才能產生高效的樣式效果,過度使用也會導致代碼可讀性降低。
上一篇java int帶x和f
下一篇vue查詢狀態列表