如何通过更改索引将样式应用于类或id？

Question

我有这样的风格：

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

我想将此应用于 #detailTable 的所有元素（无论索引1,2 ...＃a结束）。是不是可以用CSS做到这一点？

Answer 1

将id start与selector：

一起使用

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

Answer 2

您可以使用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>

Answer 3

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors