直接说结论：表格本身不支持嵌套编号。 没有层级语义， 之间也不存在“父-子”计数关系，这条路根本走不通。强行把 counter-reset 套上去，要么失效，要么计数乱掉。要实现多级编号，要么把表格结构伪装成有嵌套语义的容器，要么老老实实换更合适的 HTML 结构。
这个问题的核心在于：浏览器对 的渲染逻辑比较特殊。counter-reset 需要作用在具有明确嵌套作用域的块级容器上——像 、
、
这种才行。而
是表格行盒，不具备 CSS 计数器的作用域继承能力； 更是匿名盒，连 counter-increment 都接不住。就算硬写这样的代码：
table { counter-reset: row; }
tr { counter-increment: row; }
td::before { content: counter(row); }
结果通常很尴尬：每行都显示 1，或者全是 0。原因很简单——tr 不被当作独立的计数作用域，同时 counter-reset 在 table 上设置后，也穿透不到 tr 的子节点层面形成嵌套链。
想要类似 1.1、1.2.1 这种编号？必须重构 DOM
放弃原生 ，改用语义清晰且支持嵌套的结构，才是正道。CSS counters 需要真实的 DOM 嵌套关系才能生效，这是绕不开的。几种常见做法：
- 用
- 用
或者纯内容，编号由 - 最稳妥的方式：
+ + ，并且确保嵌套层级真实存在——比如某个 row 下面有 subrow
只要 DOM 有了父子嵌套，CSS 就能通过 counter-reset 和 counters() 正常工作。举个例子：
.table { counter-reset: section; }
.row { counter-increment: section; }
.row::before { content: counters(section, ".") " "; }
.subrow { counter-increment: section; }
.subrow::before { content: counters(section, ".") " "; }
如果非要死磕原生 table，那就只能退化为单级编号
这种情况下，唯一可行的方案是对第一列的 或 做线性编号——就是 1、2、3 这种，不涉及嵌套。操作步骤也不复杂：
- 在
上设置 counter-reset: row
- 给每个
加上 counter-increment: row
- 在首个
或 上用 ::before { content: counter(row) ". "; }
- 确认没有其他样式干扰即可
不过需要注意：这种编号跟表格结构完全无关，只是按 在 DOM 中的顺序递增。如果表格里有 或 ，需要额外用选择器把它们排除掉，否则计数会乱。
这里有个容易踩坑的点
很多人试图在 上写 counter-reset，指望它能重置下一行的编号——但这是完全无效的。原因在于 counter-reset 只会影响后续的兄弟元素和后代元素，而 后面没有同级的 ，它的后代也几乎不可能触发 counter-increment。真正能起作用的永远都是容器元素——、
| | | | | | |
