:nth-child() 选错行因浏览器自动插入<tbody>，应显式写<thead><tbody>并用 tbody tr:nth-of-type(2)；最后一列边框用 tbody td:last-child；colgroup仅支持width等有限样式；跨行跨列时CSS选择器失效，需用class或JS。
table 里用 :nth-child() 为什么总选错行？
因为 <tr> 的父元素是 <tbody>（浏览器自动插入），不是 <table>。直接写 table tr:nth-child(2) 实际匹配的是第 2 个 <tr>，但若表格含 <thead> 或 <caption>，序号就乱了。
- 优先用语义化结构：显式写出
<thead>、<tbody>，再对tbody tr:nth-child(2)操作 - 避免依赖隐式
<tbody>：有些框架（如 Vue 渲染 table）可能不生成它，导致选择器失效 - 要选“第 2 行数据”，别用
tr:nth-child(2)，改用tbody > tr:nth-of-type(2)——:nth-of-type只计<tr>元素，更稳定
如何只给最后一列加边框，且避开表头？
不能只写 td:last-child，它会同时命中 <th> 和 <td>，而表头列通常不需要右边界。
- 用
tbody td:last-child精确限定范围，排除<thead> - 如果表格无
<tbody>，需补上，否则样式不可靠；现代 CSS 不支持“跳过<th>只选<td>”的伪类组合 - 注意
colspan干扰：若某行最后一格跨列，:last-child仍生效，但视觉上可能不连续 —— 这时得靠 JS 标记或额外 class 控制
tbody td:last-child {
border-right: 2px solid #333;
}
colgroup + CSS 选择器能控制列样式吗？
不能直接用 CSS 选中 <col> 元素设样式（它不渲染），但它是唯一能真正“按列”控制宽度、背景、边框的原生方案。
-
<col>上只能用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必须紧贴<table>开始后，且在<caption>之后、<thead>之前，顺序错就失效
合并单元格（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 动态加类
<thead>/<tbody> 是否显式存在、rowspan 是否跨区域、甚至空行是否被忽略，都会让同一个选择器在不同环境表现不一。真要精准，宁可多写两行 class，少赌浏览器解析细节。 
