如何使用 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中文网其他相关文章！