如何精准定位并样式化表格里的特定单元格（th/td）

作者：袖梨 2026-06-19

本文介绍纯 css 方案，无需 javascript，通过 :nth-child()、:nth-of-type() 等伪类选择器精准定位表格中任意 <th> 或 <td> 单元格，并为其应用独立样式（如字体、背景色等）。

本文介绍纯 css 方案，无需 javascript，通过 :nth-child()、:nth-of-type() 等伪类选择器精准定位表格中任意 <th> 或 <td> 单元格，并为其应用独立样式（如字体、背景色等）。

在 HTML 表格中，若需为某一行中的若干连续或离散单元格单独设置样式（例如修改字体、背景色、文字颜色等），最规范、语义清晰且无需 JS 的方式是使用 CSS 伪类选择器。核心在于理解表格结构层级：<table> → <tr>（行）→ <th>/<td>（单元格），再结合 :nth-of-type(n) 或 :nth-child(n) 精确定位。

✅ 推荐方案：使用 :nth-of-type() 定位（更可靠）

tr:nth-of-type(3) td:nth-of-type(2) 表示「第 3 行中第 2 个 <td>」；相比 :nth-child()，:nth-of-type() 不受同级其他元素（如 <th> 混排）干扰，更适合表格场景。

以下为完整可运行示例（已修正原始代码中的结构问题：<html> 标签不应在 <body> 内，且 <body> 应位于 <html> 下）：

<!DOCTYPE html><html><head><style>  table, th, td {    border: 3px solid white;    border-collapse: collapse;  }  th, td {    padding: 10px;  }  body {    color: white;    background-color: black;  }  /* 修改第3行中第2–7个td的样式 */  tr:nth-of-type(3) td:nth-of-type(2),  tr:nth-of-type(3) td:nth-of-type(3),  tr:nth-of-type(3) td:nth-of-type(4),  tr:nth-of-type(3) td:nth-of-type(5),  tr:nth-of-type(3) td:nth-of-type(6),  tr:nth-of-type(3) td:nth-of-type(7) {    background-color: #ff6b6b;    font-family: "Comic Sans MS", cursive, sans-serif;    font-weight: bold;  }  /* 可选：为第1行的第4个th加特殊样式 */  tr:nth-of-type(1) th:nth-of-type(4) {    background-color: #4ecdc4;    color: #1a1a1a;  }</style></head><body>  <table>    <tr>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>      <th>dummy</th>    </tr>    <tr>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>    </tr>    <tr>      <td>dummy</td>      <!-- Part need to change style from this line -->      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <td>dummy</td>      <!-- to this line -->      <td>dummy</td>    </tr>  </table></body></html>

⚠️ 注意事项与最佳实践

避免滥用 :nth-child()：若 <tr> 中混用 <th> 和 <td>（如表头行含 <td>），:nth-child(n) 可能因 DOM 顺序错位而失效；优先选用 :nth-of-type(n)。
性能友好：纯 CSS 选择器渲染高效，适合静态表格；动态高频率更新建议配合语义化 class（如 <td class="highlight">）提升可维护性。
可读性增强技巧：
- 连续单元格可用范围语法（CSS 未原生支持，但可通过逗号分组或预处理器实现）；
- 为关键单元格添加 data-role="highlight" 等自定义属性，再用 [data-role="highlight"] 选择，兼顾语义与灵活性。
字体回退必须声明：如 font-family: "Comic Sans MS", cursive, sans-serif，确保跨平台兼容。