如何 select 属性或通配符覆盖 CSS select 或

Question

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

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

然后页面刷新后，可以看到2处jss后的值变化

#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-docked.jssXXX
li.MuiListItem-root.XXX.MuiListItem-装订线

Screenshot of where the values are

我正在尝试找出正确的语法来形成一个选择器，该选择器将 return 'THIS IS MY NAME' 即使在上面指出的每个部分的 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

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

这是一个简单的示例，从 HTML 的 select 基本集合（只是直接附加到您感兴趣的元素的类）中归结出来。如果这还不足以 select 您想要的，即不够独特，请事先添加更多内容，但不要添加 .jssxxx s。

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>

如何 select 属性或通配符覆盖 CSS select 或

How to either select the attribute or wildcard over CSS selector

css

attributes

css-selectors