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

本文介绍纯 css 方案，无需 javascript，通过 :nth-child()、:nth-of-type() 等伪类选择器精准定位表格中任意

或 单元格，并为其应用独立样式（如字体、背景色等）。

在 HTML 表格中，若需为某一行中的若干连续或离散单元格单独设置样式（例如修改字体、背景色、文字颜色等），最规范、语义清晰且无需 JS 的方式是使用 CSS 伪类选择器。核心在于理解表格结构层级：

→ （行）→ 中混用

/

（单元格），再结合 :nth-of-type(n) 或 :nth-child(n) 精确定位。

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

tr:nth-of-type(3) td:nth-of-type(2) 表示「第 3 行中第 2 个

左手医生开放平台

左手医生开放平台是一款面向智慧医疗服务建设的 AI 医疗开放平台。

下载

」；相比 :nth-child()，:nth-of-type() 不受同级其他元素（如

混排）干扰，更适合表格场景。

以下为完整可运行示例（已修正原始代码中的结构问题： 标签不应在

内，且 应位于 下）：

<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>

dummy	dummy	dummy	dummy	dummy	dummy	dummy	dummy
dummy	dummy	dummy	dummy	dummy	dummy	dummy	dummy
dummy	dummy	dummy	dummy	dummy	dummy	dummy	dummy

⚠️ 注意事项与最佳实践

• 避免滥用 :nth-child()：若

和

（如表头行含

），:nth-child(n) 可能因 DOM 顺序错位而失效；优先选用 :nth-of-type(n)。

性能友好：纯 CSS 选择器渲染高效，适合静态表格；动态高频率更新建议配合语义化 class（如

）提升可维护性。

可读性增强技巧：

• 连续单元格可用范围语法（CSS 未原生支持，但可通过逗号分组或预处理器实现）；
• 为关键单元格添加 data-role="highlight" 等自定义属性，再用 [data-role="highlight"] 选择，兼顾语义与灵活性。

字体回退必须声明：如 font-family: "Comic Sans MS", cursive, sans-serif，确保跨平台兼容。

掌握 :nth-of-type() 是表格精细化样式的基石——它让 CSS 不仅能“全局统一样式”，更能“按需精准着色”，真正实现结构与表现的解耦。