CSS 选择具有 4 个类的元素，其中 3 个具有相同的开始

Question

我有一个元素，有类

MuiTable-root jss51 jss52 jss53

.

另一个元素有类

MuiTable-root jss51

.

jss

后面的数字可以不同，但是第一个元素中第一个

jss

后面的数字和第二个元素中唯一的

jss

后面的数字是相同的。 （例如，

MuiTable-root jss23 jss24 jss25

代表第一个元素，

MuiTable-root jss23

代表第二个）

如何使用 css 只选择第一个元素？

编辑：

我使用的HTML：

<div>
   <table class="MuiTable-root jss51 jss52 jss53">
      <colgroup>...</colgroup>
      <thead class="MuiTableHead-root">...</thead>
   </table>
   <table class="MuiTable-root jss51">
      <colgroup>...</colgroup>
      <tbody class="MuiTableBody-root">...</thead>
   </table>
</div>

我只需要更改第一个表的实例。我无法访问表格上方的

<div>

。我需要纯粹使用表的类来工作。同样，

jss

之后的数字并不总是 51、52、53

Answer 1

使用这个选择器：

.MuiTable-root:nth-of-type(1) {
  background-color: yellow;
}

这个选择器的解释，在这里

浏览器支持-在这里查看

Answer 2

如果给出：

• 第一个

  jss

  中至少有一个

  <table>

  紧跟在以0到9之间的数字结尾的类名之后（例如

  jss51 jss52

  ）
• 第二个

  jss

  中的

  <table>

  确实not紧跟在以0到9之间的数字结尾的类名之后

您可以检查

jss

出现，它紧跟在 0 到 9 之间的数字

Y

之后，带有

[class*="Y jss"]

参见 w3 文档以供参考：

[att*=val]
表示具有 att 属性的元素，其值至少包含一个子字符串“val”的实例。如果“val”是空字符串，那么选择器不代表任何东西。

例如：

[class*="0 jss"],
[class*="1 jss"],
[class*="2 jss"],
[class*="3 jss"],
[class*="4 jss"],
[class*="5 jss"],
[class*="6 jss"],
[class*="7 jss"],
[class*="8 jss"],
[class*="9 jss"]
{
color: red;
}

<table class="MuiTable-root jss51 jss52 jss53">
  <colgroup></colgroup>
  <thead class="MuiTableHead-root">
    <td>should be red</td>
  </thead>
</table>
  <table class="MuiTable-root jss51">
  <colgroup></colgroup>
  <tbody class="MuiTableBody-root">
    <td>should not be red</td>
  </tbody>
</table>