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>