如何使用CSS counter-increment排除表格首行与末行

嘿，这问题我熟！你之前的选择器写法出了点小问题，导致计数器没生效。我给你捋清楚怎么搞定同时排除表头和末行的行编号：

首先，咱们先搞明白CSS选择器的逻辑——你之前写的tr:not(thead) tr:not(:last-child)是嵌套选择器，意思是找「不在thead里的tr里面的tr」，但表格里根本不会有tr嵌套tr的情况，所以这个选择器匹配不到任何元素，自然看不到编号。另一种写法的语法本身就不对，所以也没效果。

下面分两种常见的表格结构给你解决方案：

情况1：表格用了规范的<thead>和<tbody>结构 #

如果你的表头在<thead>里，数据行都在<tbody>里，那直接给<tbody>里非最后一行的tr加编号就行：

table#thisNet {
  counter-reset: netLogCounter;
}

table#thisNet tbody tr:not(:last-child) td:first-child::before {
  counter-increment: netLogCounter;
  content: counter(netLogCounter);
  /* 可选：给编号加个右边距，和内容区分开 */
  margin-right: 0.5em;
}

这种写法会自动排除<thead>里的表头行，同时跳过<tbody>的最后一行。

情况2：表格没有<thead>，首行就是表头 #

如果你的表格是简单的<table>直接包含tr，首行是表头，那直接用:not(:first-child):not(:last-child)来选中中间的所有数据行：

table#thisNet {
  counter-reset: netLogCounter;
}

table#thisNet tr:not(:first-child):not(:last-child) td:first-child::before {
  counter-increment: netLogCounter;
  content: counter(netLogCounter);
  margin-right: 0.5em;
}

这个选择器会精准跳过第一行（表头）和最后一行，只给中间的行加编号。

你可以根据自己的表格结构选对应的代码，试试就知道效果啦！

内容的提问来源于stack exchange，提问作者Keith D Kaiser