css的content属性不能直接用于html表格单元格自动编号，必须借助counter-reset和counter-increment配合::before伪元素实现；多级编号或动态交互场景应优先使用javascript。
content属性不能直接用于HTML表格单元格的自动编号
这是个常见误解：content 是 CSS 伪元素（::before/::after）的属性，它本身不作用于 HTML 元素的“内容插入”，更不会自动感知表格行序。直接在 <td> 上写 <code>content: "1. "; 完全无效——CSS 中没有这种用法，浏览器会忽略。
用 counter-reset + counter-increment 实现真正的自动编号
真正可行的方式是借助 CSS 计数器机制，配合 counter-reset 在表格上初始化计数器，再用 counter-increment 在每行触发递增，最后通过 ::before 和 counter() 函数输出编号。
<table> 上设置 <code>counter-reset: row-num;<tr> 上设置 <code>counter-increment: row-num;<td> 或 <code><th> 的 <code>::before里写content: counter(row-num) ". ";- 注意：如果只想给第一列编号，建议只对首列
<td>:first-child::before 生效，避免每格都出编号 <p>示例片段：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">table { counter-reset: row-num; } tr { counter-increment: row-num; } td:first-child::before { content: counter(row-num) ". "; }</pre> <h3>为什么不用 <code>display: table-cell自定义元素模拟？有人试图用
<div class="row"><div class="cell"> 搭配 <code>counter，但这样失去语义和可访问性，且counter-reset在非<table> 容器中行为不稳定（尤其嵌套时重置逻辑易错）。原生 <code><table> 的 DOM 层级清晰，<code>counter能可靠继承和重置。- 若表格有
<thead>，需单独控制：给 <code>thead tr设置counter-increment: none;，否则表头行也会被计数 - 带分页或动态加载的表格，CSS 计数器无法跨渲染周期保持状态，此时必须切回 JS 生成编号
- IE 不支持
counter()在::before中的字符串拼接（如counter(n) "."），老项目需 fallback
需要多级编号（如 1.1、2.3）怎么办？
CSS 计数器支持嵌套，但表格场景下要谨慎：每层
counter-reset需绑定到对应层级容器（如<tbody> 可设 <code>counter-reset: section;），而<tr> 内部无法自然形成“子计数器”上下文。 <ul> <li>简单多级（如章节+小节）：用两个独立计数器，<code>counter(section) "." counter(sub)，靠 JS 或服务端控制counter-increment触发时机 - 若表格有
- 纯 CSS 实现仅适用于静态、结构固定的嵌套表（例如
<table> 套 <code><table>），且外层 <code><table> 必须设 <code>counter-reset，内层<table> 再设自己的 <code>counter-reset - 绝大多数实际业务中，多级编号意味着数据有层级语义，这时用 JS 动态生成
data-number属性并 CSS 映射更可控
真正麻烦的不是怎么写 CSS，而是当表格支持排序、筛选、折叠时，编号是否该重排——这时候 CSS 计数器就彻底失效了，得回到 DOM 操作层面。
