css - 如何将样式应用于具有更改索引的类或 id？

Question

我有这样的风格:

#detailTable4 tbody tr td:last-child {
  background-color: #7E0303;
}

我想将此应用到所有带有 #detailTable 的元素(无论索引 1,2...# 是结尾)。是否可以仅使用 CSS 来实现？

Answer 1

您可以使用 id 开头的属性选择器，如下面的代码片段所示。 [id^="detailTable"] 选择器将匹配 id 以 detailTable 开头的任何元素。

[id^="detailTable"] tbody tr td:last-child {
  background-color: #7E0303;
}

<table id='detailTable1'>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

<table id='detailTable2'>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

<table id='detailTable4'>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>

<table id='detailTable-abcd'>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
  </tbody>
</table>