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？啊。只是觉得可能有一种说法，“不要在这张桌子上跟随css＆＃39;对于这种情况。

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>

有关:not here的更多信息。

Answer 2

最好的解决方案是添加样式。也就是说，在 all 表中添加一个类，然后更改CSS：

.mytable tbody {}
.mytable tbody > tr {}

等等。您几乎总是会遇到<table> s，在这里您不需要特定的站点范围样式，然后它就像从表元素中保留mytable类一样简单。

如果你不能这样做，另一个选项是:not()选择器：排除所有带有plain类的表：

table:not(.plain) tbody {}

如何防止一个表遵守CSS规则

2 个答案: