:nth-child() 选错行因浏览器自动插入，应显式写并用 tbody tr:nth-of-type(2)；最后一列边框用 tbody td:last-child；colgroup仅支持width等有限样式；跨行跨列时CSS选择器失效，需用class或JS。
table 里用 :nth-child() 为什么总选错行？
因为 不能只写 不能直接用 CSS 选中 不准。CSS 选择器按 DOM 结构匹配，不感知表格逻辑布局。一个 立即学习“前端免费学习笔记（深入）”； 的父元素是 （浏览器自动插入），不是
。直接写
table tr:nth-child(2) 实际匹配的是第 2 个 ，但若表格含 或
、
，再对
tbody tr:nth-child(2) 操作
：有些框架（如 Vue 渲染 table）可能不生成它，导致选择器失效
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 选择器能控制列样式吗？
width、background、border（部分浏览器支持）、visibility —— 其他 CSS 属性无效col:nth-child(3) { background: transparent; } 无效，得换思路：tbody td:nth-child(3), thead th:nth-child(3) { text-align: right; }
colgroup 必须紧贴 开始后，且在
之前，顺序错就失效
合并单元格（
rowspan/colspan）后选择器还准吗？td rowspan="2" 在 DOM 中仍是单个节点，不会“覆盖”下方行的对应位置。
表格的 DOM 结构比看起来脆弱得多，tr:nth-child(3) td:first-child 仍会选中第 3 行第 1 列的单元格，哪怕它上方有 rowspan=3 的单元格data-col="price"）或 JS 动态加类/
是否显式存在、
rowspan 是否跨区域、甚至空行是否被忽略，都会让同一个选择器在不同环境表现不一。真要精准，宁可多写两行 class，少赌浏览器解析细节。
