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

Question

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

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

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

Answer 1

如果修改 HTML 是一个选项:

使用 :not() CSS 伪类。

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.

这需要在您要定位的元素中使用一个类。

请注意，这会产生意想不到的结果，因为这些表行中缺少 ::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>$100</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$50</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>$100</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$50</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>$100</td>
    </tr>
    <tr class="different">
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>