如何在多 table 环境中使用全局 CSS 覆盖 table 布局？

Question

我的页面使用一系列表格，其中许多表格使用以下 CSS 在左侧添加计数器。

table.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
}

但我的一些表格不需要该列。如何为不需要计数器的表覆盖全局 CSS？

Answer 1

如果修改 HTML 是一个选项：

使用:not()CSS伪class.

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

这需要在您要定位的元素中使用 class。

请注意，这会产生意外结果，因为这些 table 行中缺少 ::before 伪元素会导致不一致：

table {
  counter-reset: sortabletablescope;
}

table.sortable tbody tr:not(.different)::before {
  content: counter(sortabletablescope);
  counter-increment: sortabletablescope;
  display: table-cell;
}

<table class="sortable">
  <thead>
    <tr>
      <th>#</th>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td></td>
    </tr>
    <tr>
      <td>March</td>
      <td></td>
    </tr>
  </tbody>
</table>

要解决这个问题，请使用如下所示的空伪元素：

table {
  counter-reset: sortabletablescope;
}

table.sortable tbody tr:not(.different)::before {
  content: counter(sortabletablescope);
  counter-increment: sortabletablescope;
  display: table-cell;
}

table.sortable tbody tr.different::before {
  content: '';
}

<table class="sortable">
  <thead>
    <tr>
      <th>#</th>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td></td>
    </tr>
    <tr>
      <td>March</td>
      <td></td>
    </tr>
  </tbody>
</table>

如果列表需要降序排列，唯一的限制是您必须知道将显示的总行数。

创建一个总行数加一的CSS计数器作用域；它是从零开始的。

  counter-reset: <identifier> <totalNumberOfRows + 1>;

table {
  counter-reset: sortabletablescope 3;
}

table.sortable tbody tr:not(.different)::before {
  content: counter(sortabletablescope);
  /* Substract 1 for each row. */
  counter-increment: sortabletablescope -1;
  display: table-cell;
}

table.sortable tbody tr.different::before {
  content: '';
}

<table class="sortable">
  <thead>
    <tr>
      <th>#</th>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>0</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td></td>
    </tr>
    <tr>
      <td>March</td>
      <td></td>
    </tr>
  </tbody>
</table>

如何在多 table 环境中使用全局 CSS 覆盖 table 布局？

How to override table layout using Global CSS in a multi-table environment?

html

css

jquery-ui-sortable