时间戳

首页 > 解决方案 > 如何通过 CSS 选择器选择属性或通配符

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

问题描述

几天来，我一直在尝试弄清楚如何使用 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个部分变化：

值所在位置的屏幕截图

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

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

我正在做一些谷歌搜索，试图弄清楚我如何可以通配这些值或找到另一种方法。我发现您可以使用属性选择器，所以我一直试图弄清楚这一点，但我似乎没有正确地做到这一点。

我试过了..

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

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

这是完整结构的图片

任何帮助将非常感激。谢谢大家。

标签： csscss-selectorsattributes

解决方案

您可能不需要在每个细节中定义选择器 - 但如果您想要，就像在前两个示例中一样，只需省略更改的位 (.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>

推荐阅读