当元素 ID 或类名包含随机、动态生成的部分（如 menu-v15rco8kc2）时，无法使用通配符 * 直接匹配，但可通过 CSS 属性选择器（如 [id^='menu-']）精准定位。本文详解四种常用属性选择器及其在真实场景中的应用技巧。
当元素 id 或类名包含随机、动态生成的部分（如 `menu-v15rco8kc2`）时，无法使用通配符 `*` 直接匹配，但可通过 css 属性选择器（如 `[id^='menu-']`）精准定位。本文详解四种常用属性选择器及其在真实场景中的应用技巧。
在现代前端开发中，尤其是基于 React、Vue 或微前端架构的项目里，组件生成的 DOM 元素 ID 或类名常含哈希后缀（如 menu-v15rco8kc2），每次构建或渲染都会变化。此时若硬编码完整 ID（如 #menu-v15rco8kc2），脚本极易失效。CSS 属性选择器正是解决此类问题的标准方案——它不依赖完整字符串匹配，而是基于属性值的逻辑关系进行筛选。
以下是四种核心属性选择器及其适用场景：
-
[attr^="val"]：匹配属性值以指定字符串开头（最常用，适用于动态 ID 前缀固定的情况） -
[attr$="val"]：匹配属性值以指定字符串结尾（适合版本号、环境标识后缀） -
[attr*="val"]：匹配属性值包含指定子串（灵活性高，但性能略低，慎用于高频操作） -
[attr~="val"]：匹配属性值中以空格分隔的独立单词（主要用于class等多值属性）
以原问题为例，目标元素 ID 为 menu-v15rco8kc2，前缀 menu- 固定，后缀随机。应使用 ^= 选择器替代硬编码 ID：
// ✅ 推荐：利用 id 前缀匹配，稳定可靠 const btnSpan = document.querySelector( "[id^='menu-'] > div:nth-child(1) > button > span.Typography-module__lVnit.Typography-module__Nfgvc.Button-module__Imdmt" ); // ✅ 进阶：若需更高容错性（如 menu- 可能出现在 class 中），可组合使用 const fallback = document.querySelector( "[class*='menu-'] .Typography-module__lVnit.Button-module__Imdmt" );
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 属性选择器区分大小写（HTML 中 ID 默认不区分，但 XHTML 或自定义属性需注意）；
- 避免过度嵌套（如
div > div > div > span），建议结合语义化类名或data-*属性提升可维护性； - 若需频繁查询，可缓存结果或使用
MutationObserver监听 DOM 变化； - 在 Shadow DOM 中，需确保查询作用域正确（如调用
shadowRoot.querySelector()）。
总结：放弃“通配符梦”，拥抱标准 CSS 属性选择器——它轻量、原生、无需依赖框架，是处理动态 DOM 的首选实践。将 #menu-v15rco8kc2 替换为 [id^='menu-']，一行代码即可让脚本重获鲁棒性。
