表格列加粗须用col:nth-child(n) > *穿透样式，因不可渲染且不继承font-weight；遇rowspan/colspan时nth-child失效，应改用类名或js动态添加，并确保thead/tbody显式闭合。

表格列加粗用 col:nth-child(n) > * 但必须写对选择器

直接给 <col> 标签加 font-weight: bold 没用，因为 <col> 是不可渲染的元数据标签，不承载内容也不继承样式。真正生效的是向下穿透的选择器：col:nth-child(2) > * —— 注意必须带 > *，否则样式不会落到 <td> 或 <code><th> 上。 <p>常见错误是只写 <code>col:nth-child(2) 或 col:nth-child(2) td，前者无效，后者在没有 <colgroup></colgroup> 或结构错位时也常失效。

• 确保表格有明确的 <thead> 和 <code><tbody> 结构，浏览器自动补全 DOM 容易导致选择器失准 <li>如果只希望表头第 3 列加粗，用 <code>thead th:nth-child(3)；数据行第 3 列加粗，用 tbody td:nth-child(3)
• 混合使用 <th> 和 <code><td> 的列（如响应式表格），改用 <code>tr > :nth-child(3) 更可靠

  rowspan 或 colspan 一出现，:nth-child(n) 就不准了

  :nth-child(n) 数的是 DOM 子元素顺序，不是视觉列位置。比如某行第一个单元格写了 colspan="2"，那它后面所有 <td> 的索引都会偏移，原本第 3 列的单元格可能变成 <code>:nth-child(4) 甚至更靠后。

  这时候纯 CSS 基本失效，只能换路子：

  • 手动给目标列每个单元格加类名，比如 <td class="col-2-bold">，再写 <code>.col-2-bold { font-weight: 700; }
  • 用 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> 包每格内容？语义和维护都扛不住

    技术上当然可以：<td><strong>金额</strong></td>，但实际项目里基本不这么干。

    

    Doc To HTML

    使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

    下载
    • 语义污染：加粗只是视觉强调，不代表这格内容比别的更重要；屏幕阅读器会加重朗读，可能误导用户
    • 维护成本高：新增一行就得挨个补 <strong></strong>，没法批量控制；以后要改成背景色或边框高亮，得全量改 HTML
    • 样式耦合：一旦设计变更，CSS 改一行就能全局生效，而 HTML 方案要改几十上百处

    除非是极简静态页、列数固定且无交互，否则优先走 CSS 类或 JS 打标路线。

    加粗没反应？先盯紧 computed styles 里的 font-weight

    很多“加粗失败”不是写法错，而是被覆盖或字体本身不支持：

    • 检查是否被重置 CSS 覆盖，比如全局写了 strong { font-weight: normal; } 或 td { font-weight: 400; }
    • 确认当前字体是否真有 bold 字重：系统字体（如 Arial）通常支持 700，但某些自定义中文字体只提供 400，设 font-weight: 700 会被浏览器模拟加粗，效果发虚
    • 父级设置了 font-weight: 100 或 lighter，子元素即使写 bold 也可能被压制——bolder 和 lighter 是相对计算，行为不稳定

    最直接的办法：打开开发者工具，选中目标单元格，看 computed 样式里 font-weight 最终值是多少。值不对，就说明样式没生效或被覆盖；值对了但看起来不粗，大概率是字体字重缺失。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！