如何使用 CSS nth-child 選擇一系列元素？

增強第 n 個範圍的 CSS 選擇器

CSS 中的第 n 個子選擇器允許根據元素在父元素中的位置精確選擇元素。但是，將此選擇器應用於未由特定數字定義的範圍可能具有挑戰性。

擴展第n 個子級範圍選擇

考慮以下CSS 選擇器：

<code class="css">.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}</code>

此選擇器旨在將背景顏色應用於

範圍內 中的元素與類別「myTableRow」。但是，問號 (?) 佔位符使範圍未定義。

將此選擇器套用於

;第2 至4 列，您可以使用以下CSS：

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}</code>

了解增強型選擇器

此選擇器使用兩個附加的第n 個子選擇器：

• :nth-child(n 2)：選擇從第2 個位置開始的所有子級。
• :nth-child(-n 4)：選取直到第 4 個位置的所有子層級。

透過組合這兩個子選擇器，我們有效地創建了一個包含第二到第四位置元素的範圍。

用法範例

考慮以下HTML 表格：

<code class="html"><table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table></code>

將增強型CSS 選擇器套用於此表格將導致背景顏色套用於第二、第三個和第四個

表格。 “myTableRow” 中的元素。這是因為這些元素在 2 到 4 的定義範圍內。

以上是如何使用 CSS nth-child 選擇一系列元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！