css - 如何防止一张表遵守 CSS 规则

Question

我的样式表中已有以下 CSS，它为应用中所有表格的每一行添加了一个计数器:

tbody {
  counter-reset: rowNumber;
}

tbody tr {
  counter-increment: rowNumber;
}

tbody tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

我现在有一个表格，我不想在网站生成的表格分数中添加计数器，即违反 CSS 规则。我是否需要为我想要遵守这些规则的那些表的这三个表元素放置一个唯一的类名，然后相应地更改 CSS？啊。只是认为对于这种情况可能有一种说法，“不要遵循这张 table 上的 css”。

Answer 1

您可以向应该忽略计数器样式的表添加一个类(例如，no-counter)。然后像这样改变你的风格:

table:not(.no-counter) tbody {
  counter-reset: rowNumber;
}

table:not(.no-counter) tbody tr {
  counter-increment: rowNumber;
}

table:not(.no-counter) tbody tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}

所以应该不有计数器的表看起来像这样:

<table class="no-counter">
   ...
</table>

关于的更多信息:不是 here .