:nth-child() 选错行因浏览器自动插入，应显式写并用 tbody tr:nth-of-type(2)；最后一列边框用 tbody td:last-child；colgroup仅支持width等有限样式；跨行跨列时css选择器失效，需用class或js。
table 里用 :nth-child() 为什么总选错行？
因为
（浏览器自动插入），不是
。直接写 table tr:nth-child(2) 实际匹配的是第 2 个
，但若表格含
或
，序号就乱了。
- 优先用语义化结构：显式写出
、
，再对 tbody tr:nth-child(2) 操作
- 避免依赖隐式
：有些框架（如 vue 渲染 table）可能不生成它，导致选择器失效
- 要选“第 2 行数据”，别用
tr:nth-child(2)，改用 tbody > tr:nth-of-type(2) —— :nth-of-type 只计
元素，更稳定
如何只给最后一列加边框，且避开表头？
不能只写 td:last-child，它会同时命中
和
，而表头列通常不需要右边界。
- 用
tbody td:last-child 精确限定范围，排除
- 如果表格无
，需补上，否则样式不可靠；现代 CSS 不支持“跳过
只选
”的伪类组合
- 注意
colspan 干扰：若某行最后一格跨列，:last-child 仍生效，但视觉上可能不连续 —— 这时得靠 JS 标记或额外 class 控制
tbody td:last-child { border-right: 2px solid #333; }
colgroup + CSS 选择器能控制列样式吗？
不能直接用 CSS 选中
-
width、background、border（部分浏览器支持）、visibility —— 其他 CSS 属性无效
- 想让第 3 列文字居右？必须写：
col:nth-child(3) { background: transparent; } 无效，得换思路：tbody td:nth-child(3), thead th:nth-child(3) { text-align: right; }
-
colgroup 必须紧贴
开始后，且在
之后、
之前，顺序错就失效
合并单元格（rowspan/colspan）后选择器还准吗？
不准。CSS 选择器按 dom 结构匹配，不感知表格逻辑布局。一个 td rowspan="2" 在 DOM 中仍是单个节点，不会“覆盖”下方行的对应位置。
立即学习“前端免费学习笔记（深入）”；
-
tr:nth-child(3) td:first-child 仍会选中第 3 行第 1 列的单元格，哪怕它上方有 rowspan=3 的单元格
- 无法用纯 CSS 选出“视觉上第 2 列的所有单元格”，因为跨列会打乱物理位置与视觉列的映射
- 真实项目中遇到复杂合并，建议放弃纯 CSS 选择，改用 class 标记（如
data-col="price"）或 JS 动态加类
表格的 DOM 结构比看起来脆弱得多，
/
是否显式存在、rowspan 是否跨区域、甚至空行是否被忽略，都会让同一个选择器在不同环境表现不一。真要精准，宁可多写两行 class，少赌浏览器解析细节。