用 :nth-child(-n+3) 精准选中前三列需分别写 tr > td:nth-child(-n+3) 和 thead tr > th:nth-child(-n+3)，因 col 不参与渲染且 :nth-of-type 按类型非位置计数，而 colspan 会导致视觉列与 DOM 顺序错位，此时纯 CSS 无法解决。
用 :nth-child() 精准选中前三列（td 和 th）
表格列本身没有原生 DOM 节点，所以不能直接写 col:nth-child(-n+3)——col 元素不参与渲染布局，浏览器对它的样式支持极弱。真正能生效的是对每行中的单元格进行列向筛选。
关键逻辑是：在每一行（tr）内，选中第 1、2、3 个单元格子元素，即 td:nth-child(-n+3) 和 th:nth-child(-n+3)。注意必须分开写，因为 th 和 td 是不同标签，tr > :nth-child(-n+3) 会漏掉 th（如果它不是第一个子元素，比如前面有 th 混排）。
-
tr > td:nth-child(-n+3)匹配所有数据行的前三个td -
thead tr > th:nth-child(-n+3)匹配表头行的前三个th - 若表头是
tr内混用th和td，统一用tr > *:nth-child(-n+3)，但需确认是否影响其他非单元格子节点
避免被 colgroup 或 rowspan/colspan 干扰
当表格存在合并单元格时，:nth-child() 仍按 DOM 顺序计数，不是视觉列序。例如某行第一个 td 的 colspan="2"，那它算作一个子元素，后面那个 td 就是 :nth-child(2)，但实际占据的是第 3 列位置——这时视觉上前三列 ≠ 前三个子元素。
- 纯 CSS 无法按“视觉列”反向推导单元格，这是根本限制
- 如果必须支持
colspan，得靠 JS 遍历cellIndex或生成辅助类（如给每列单元格加data-col="1"） -
colgroup中的col元素无法用 CSS 设置背景、边框等大多数样式，仅支持width和background（且兼容性差），别指望用它控制前三列样式
性能与可维护性：别滥用通配或深层嵌套
写成 table tbody tr td:nth-child(-n+3), table thead tr th:nth-child(-n+3) 看似完整，但层级过深会影响 CSS 解析速度，尤其在大型表格中。更推荐限定作用域：
- 给表格加明确 class，如
class="data-table"，然后写.data-table tbody tr td:nth-child(-n+3) - 避免用
table *或body table tr td这类宽泛选择器，容易误伤嵌套子表 - 如果只针对某一张表，用 ID 更高效：
#report-table tbody tr td:nth-child(-n+3)
为什么不用 :first-of-type 或 :nth-of-type()？
这两个伪类按元素类型分组计数，不是按位置。假设一行里是
-
td:nth-of-type(1)匹配第一个td（即第 2 列），不是第 1 列 -
th:first-of-type只能选中第一个th，无法扩展到“前三” -
:nth-child()才是唯一能按 DOM 位置连续选取的可靠方案
视觉列序和 DOM 顺序不一致时，CSS 无解——这是最容易被忽略的硬边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
