如何通过 CSS 选择器选择属性或通配符

Question

我几天来一直在尝试弄清楚如何使用 CSS 选择器获取值，但没有成功。我对这类事情并不十分擅长，并且通过谷歌搜索来学习如何做到这一点。我知道如何使用 Chrome，检查，然后突出显示页面区域并执行复制选择器，但我的问题是选择器中的 2 个部分的值在每次刷新时都会发生变化。

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

然后刷新一次页面，可以看到jss后2个点的值变化

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

比如这里你可以看到我每次刷新页面，每次都有以下2个部分变化：

• div.MuiDrawer-root.MuiDrawer-doked.jssXXX
• li.MuiListItem-root.XXX.MuiListItem-gutters

Screenshot of where the values are

我试图找出正确的语法来形成一个选择器，即使在上面指出的每个部分的 jss 之后的 2 个点的值发生变化时，它也会返回“这是我的名字”。这是我从中获取选择器的地方：

<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">THIS IS MY NAME</span>

我在 Google 上进行了一些搜索，试图找出如何对这些值进行通配符或找到另一种方法。我发现你可以使用属性选择器，所以我一直在尝试解决这个问题，但我似乎做得不对。

我试过了..

[class|="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"]

我也尝试过 Element.querySelector() 但再次使用它，我似乎无法弄清楚如何仅使用通配符或直接进入属性并获取它旁边的值。

任何帮助将不胜感激。谢谢大家。

Answer 1

您可能不需要在每个细节中都定义选择器 - 但如果您愿意，就像在前两个示例中一样，只需省略更改的位 (.jssxxx)。

这是一个简单的例子，从你的 HTML 中总结出来，基本的选择器集（只是直接附加到你感兴趣的元素的类）。如果这还不足以选择您想要的内容，即不够独特，请提前添加一些内容，但不要添加 .jssxxx 。

const el = document.querySelector('.MuiTypography-root.MuiListItemText-primary.MuiTypography-body1.MuiTypography-displayBlock');
console.log('Selection gives: ' + el.innerHTML);

<span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock">THIS IS MY NAME</span>