如何使用 CSS `nth-child` 選擇器選擇表格中的特定欄位？

第 n 個範圍的 CSS 選擇器

要選擇表中的特定列，請使用第 n 個子級 CSS 選擇器。提供的選擇器「.myTableRow td:nth-child(?)」根據表格資料儲存格 (td) 在父表行中的位置來定位表格資料儲存格 (td)。但是，問號佔位符需要替換為範圍。

第n 個子級範圍選擇

要選擇第2 列到第4 列，請使用下列方法之一：

選項1：

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

此語法確保選擇從第二個位置(n 2) 到第四個位置(-n 4) 的單元格。

選項2（更清晰的語法）：

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

此替代方案提供了更明確的範圍規範，明確標識第2 列和第4列。它無需計算總列數。

nth-Child 語法說明：

• ':nth-child(n X)' 定位第 'X' 個位置的元素向前。
• ':nth-child(-n X)' 將元素定位到「第 X」個位置。

範例：

考慮以下HTML：

<code class="html"><table class="myTable">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table></code>

應用選擇器「.myTable tr:nth-child(2) ”將會反白顯示表中的第二行。

以上是如何使用 CSS `nth-child` 選擇器選擇表格中的特定欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！