col元素本身不渲染且不继承font-weight，需用col:nth-child(n) > *或thead th:nth-child(n)/tbody td:nth-child(n)选择器作用于单元格；遇rowspan/colspan时nth-child失效，应改用类名或js动态添加；务必显式闭合thead/tbody以确保样式正确。
用 col 元素配合 font-weight 无效？那是没写对选择器
直接给 <col> 标签加 font-weight: bold 不起作用，因为 <col> 是一个“不可渲染”的元数据标签，它不承载内容，也不继承文本样式。浏览器不会把字体粗细应用到它身上。
真正起作用的是 CSS 的列选择器：用 col:nth-child(n) 配合 > * 向下选中该列下的所有单元格内容：
col:nth-child(2) > * {
font-weight: bold;
}
注意必须带 > *，否则样式不会穿透到 <td> 或 <code><th> 内部。<h3>更稳妥的做法：用 <code>tbody td:nth-child(n) 和 thead th:nth-child(n) 分开处理
当表格有 <thead> 和 <code><tbody> 结构时，<code>col 元素的样式继承容易出错（尤其在 Safari 或旧版 Edge 中）。推荐显式指定：
-
thead th:nth-child(3)控制表头第 3 列加粗 -
tbody td:nth-child(3)控制数据行第 3 列加粗 - 如果某列混合了
<th> 和 <code><td>（比如响应式表格），统一用 <code>tr > :nth-child(3)这样兼容性更好，也避免因
<colgroup></colgroup>缺失或错位导致样式失效。遇到
rowspan或colspan时，nth-child还准吗？不准——
:nth-child(n)是按 DOM 顺序数的“第几个子元素”，不是按视觉列位置。一旦某行用了colspan="2"，后续单元格的索引就会偏移。解决办法只有两个：
- 放弃纯 CSS，改用类名控制：给目标列每个单元格手动加
class="col-bold"，再写.col-bold { font-weight: bold; } - 用 JS 动态打标（适合动态生成的表格）：
document.querySelectorAll('tr').forEach(row => row.cells[1]?.classList.add('col-bold'))（这里加粗第 2 列，索引为 1）
别试图用
:nth-of-type或伪类绕过——它们对<td>/<code><th> 没有列语义。<h3>为什么不用 <code><strong></strong>包裹每个单元格内容？可以，但不推荐：
- 语义污染：加粗只是视觉强调，不代表内容重要性提升；滥用
<strong></strong>会干扰屏幕阅读器和 SEO - 维护成本高：每新增一行都要重复写
<strong></strong>，无法批量控制 - 样式耦合：如果哪天要改成背景高亮或颜色变更，就得全量替换 HTML，而不是改一行 CSS
除非是极简静态页且列数固定、无 JS 交互，否则优先走 CSS 列选择器路线。
最易被忽略的一点：表格列样式是否生效，取决于你有没有正确闭合
<thead> 和 <code><tbody> —— 浏览器自动补全 DOM 时可能打乱 <code>nth-child计算顺序，建议始终显式写出这些包裹标签。 - 放弃纯 CSS，改用类名控制：给目标列每个单元格手动加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
