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

【问题标题】：How to override table layout using Global CSS in a multi-table environment?如何在多表环境中使用全局 CSS 覆盖表布局？
【发布时间】：2017-10-04 17:44:37
【问题描述】：

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

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

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

【问题讨论】：

使用类？ <table class="sortable with-counter"> & table.sortable.with-counter tbody tr::before { … }.
可以修改HTML吗？
您需要以某种方式在 html 中识别它

标签： html css jquery-ui-sortable

【解决方案1】：

如果修改 HTML 是一个选项：

使用:not() CSS 伪类。

:not() CSS 伪类表示不匹配的元素选择器列表。因为它可以防止特定项目被选中，称为否定伪类。

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

但请注意，这会产生意想不到的结果，因为这些表行中缺少 ::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>

【讨论】：

知道如何让数字按顺序排列吗？我的表格按最后一个排序，我希望看到数字 1 在底部，并为每个新行添加一个数字。
@KeithDKaiser 嗨，基思！是的，你必须知道将显示的总行数，我编辑了答案，你可以看看那里。
漂亮，正是我所做的。这些表格是由 PHP/MYSql 生成的，因此很容易获得总数，然后完全按照您的建议进行操作。