如何在CSS选择器中使用属性选择器或通配符匹配动态变化的类名

我太懂这种困扰了——Material UI自动生成的jssXXX类名每次刷新都会变，直接复制Chrome检查器的选择器根本没法用！结合你的需求，这里有几个靠谱的解决方案：

1. 用稳定的Material UI类名构建选择器 #

动态的jssXXX是框架额外生成的，元素本身的核心类（比如MuiDrawer-root、MuiListItem-root这些）是不会变化的。我们可以直接忽略动态类，只保留稳定的类来写选择器：

#root > div > div > div.MuiDrawer-root.MuiDrawer-docked > div > div > div > li.MuiListItem-root.MuiListItem-gutters > div.MuiListItemText-root > span.MuiListItemText-primary

这个选择器会跳过那些动态变化的jssXXX类，只匹配带有稳定Material UI类的元素，完全不受页面刷新影响。

2. 结合属性选择器精准匹配目标span #

你之前用[class|="..."]的思路方向对，但语法选错了——这个操作符是匹配以指定值开头且用连字符分隔的属性值，不适合多类名的场景。正确的做法是用~=操作符匹配单个独立类（空格分隔的单词），或者叠加多个属性选择器：

精准匹配多个固定类 #

span[class~="MuiTypography-root"][class~="MuiListItemText-primary"][class~="MuiTypography-body1"]

这个选择器会匹配同时包含这三个固定类的span元素，完全不受其他动态类干扰。

直接匹配目标文本（JavaScript场景） #

如果是用JavaScript的querySelector，原生CSS暂时没有文本匹配的伪类，但可以通过遍历元素来筛选：

// 先找到所有符合基础类的span，再筛选文本匹配的
const targetElement = Array.from(document.querySelectorAll('span.MuiListItemText-primary'))
  .find(el => el.textContent.trim() === 'THIS IS MY NAME');

这种方法最直接，哪怕页面结构有小调整，只要目标文本不变就能准确定位。

3. 简化选择器（工具场景适用） #

如果是在Playwright、Puppeteer这类自动化工具中使用，可以用扩展的文本匹配选择器，写法非常简洁：

span.MuiListItemText-primary:has-text("THIS IS MY NAME")

注意这个语法是工具扩展的，原生CSS暂时不支持，但在自动化测试场景下特别实用。

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