如何仅让CSS作用于指定重复class的表格？

我有两个class为myTbl的表格，现有如下CSS用于为表格“Numbers List”列生成递增序号：

/* 为Numbers List列生成递增序号的CSS */
.myTbl tbody {
  counter-reset: rowNumber;
}
.myTbl tbody tr {
  counter-increment: rowNumber;
}
.myTbl tbody tr td:nth-child(1)::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

对应的HTML结构如下：

<div class="tableRow">
  <table class="myTbl">
    <thead>
      <tr>
        <td>Numbers List</td>
        <td>Content</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td>A</td>
      </tr>
      <tr>
        <td></td>
        <td>B</td>
      </tr>
      <tr>
        <td></td>
        <td>C</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="tableRow">
  <table class="myTbl">
    <thead>
      <tr>
        <td>C</td>
        <td>D</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

我希望该CSS仅作用于第一个表格，但无法修改HTML结构（不能更改class、添加id等），只能通过JS或jQuery实现。尝试使用:nth-child(1)无效，想知道有没有类似JS中eq()的实现方式？

可以通过JS/jQuery给第一个表格动态添加专属临时class，再调整CSS只针对这个class生效，就能避免影响第二个表格。

方法1：jQuery实现（对应你提到的eq()） #

jQuery的eq(0)会在所有匹配.myTbl的元素集合里选中第一个，给它添加一个专属class后再绑定CSS：

1. 添加jQuery代码 #

$(document).ready(function() {
  // 选中第一个.myTbl表格，添加专属class
  $('.myTbl').eq(0).addClass('first-number-table');
});

2. 修改CSS选择器 #

把原CSS里的.myTbl替换成.first-number-table，这样CSS只会作用于第一个表格：

/* 仅为第一个表格的Numbers List列生成递增序号 */
.first-number-table tbody {
  counter-reset: rowNumber;
}
.first-number-table tbody tr {
  counter-increment: rowNumber;
}
.first-number-table tbody tr td:nth-child(1)::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

方法2：原生JS实现 #

如果不用jQuery，原生JS也能精准选中第一个表格：

document.addEventListener('DOMContentLoaded', function() {
  // 选中第一个.myTbl表格
  const firstTable = document.querySelector('.myTbl');
  if (firstTable) {
    firstTable.classList.add('first-number-table');
  }
});

CSS修改和上面一致即可。

补充：为什么:nth-child(1)无效？ #

你之前尝试的:nth-child(1)无效，是因为每个表格都包裹在.tableRow容器里，每个表格都是各自父容器的第一个子元素，所以.myTbl:nth-child(1)会同时选中两个表格。而jQuery的eq(0)是在全局匹配的.myTbl集合里取第一个，这才是你需要的逻辑。

内容的提问来源于stack exchange，提问作者ttt