如何用CSS仅选中带有MuiTable-root和多个jss类的表格元素？

针对你遇到的场景——两个表格共享MuiTable-root和同一个开头的jssXXX类，但第一个表格多了额外的jss类——可以用以下几种纯CSS方法精准选中第一个表格：

• 基于类数量的属性选择器
  第一个表格的类属性值里至少包含两个空格（因为它有4个类，类之间用空格分隔，对应3个空格），而第二个表格只有2个类，仅1个空格。利用这个差异可以写：

  .MuiTable-root[class*="jss"][class*=" "][class*=" "] {
    /* 两个[class*=" "]确保类属性里至少有两个空格，即至少3个类，直接过滤掉第二个表格 */
    /* 你的样式代码 */
  }
  

• 多类组合匹配
  直接匹配同时包含共享jss类和其他jss类的表格，因为第一个表格有多个jss开头的类，第二个只有一个：

  /* 匹配拥有MuiTable-root、任意jss类，且还存在另一个jss类的表格 */
  .MuiTable-root[class*="jss"][class*="jss"] {
    /* 你的样式代码 */
  }
  

  注：这里的两个[class*="jss"]是指类属性中包含至少两处jss字符串，第一个表格满足该条件，而第二个表格的类属性里只有一处jss（比如MuiTable-root jss23），所以不会被选中。

内容的提问来源于stack exchange，提问作者VovaLeder