HTML/CSS新手求助：无需JavaScript选择特定表格单元格修改样式

要实现修改第三行<tr>中从第二个<td>到最后一个<td>的样式，不用JavaScript，直接用CSS的结构伪类选择器就能搞定，具体步骤如下：

核心选择器写法 #

直接组合使用nth-child伪类定位目标元素：

/* 选中tbody下的第三行tr，再选中该行内从第2个开始的所有td */
tbody tr:nth-child(3) td:nth-child(n+2) {
  /* 自定义字体样式示例 */
  font-family: "Arial", sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #ff0000;
}

完整代码示例 #

假设你的HTML表格结构如下：

<table>
  <tbody>
    <tr>
      <td>第一行第1个单元格</td>
      <td>第一行第2个单元格</td>
      <td>第一行第3个单元格</td>
    </tr>
    <tr>
      <td>第二行第1个单元格</td>
      <td>第二行第2个单元格</td>
      <td>第二行第3个单元格</td>
    </tr>
    <tr>
      <td>第三行第1个单元格（不修改）</td>
      <td>第三行第2个单元格（要修改）</td>
      <td>第三行第3个单元格（要修改）</td>
      <td>第三行第4个单元格（要修改）</td>
    </tr>
  </tbody>
</table>

上述CSS代码会精准选中第三行里从第2个开始的所有<td>，直接设置样式即可生效。

为什么之前的方法无效？ #

• 单独用tbody选择器只能选中整个容器，无法定位内部特定单元格；
• 若未将<span>/<div>嵌套到目标<td>内部，自然无法通过这些标签选中单元格；就算嵌套了，也属于冗余操作，用CSS结构选择器更简洁直接。

内容的提问来源于stack exchange，提问作者901D3