当元素 ID 中包含随机或动态生成的部分（如 menu-v15rco8kc2）时，无法用通配符 * 直接匹配，但可通过 CSS 属性选择器（如 [id^='menu-']）精准定位变动中的元素。
当元素 id 中包含随机或动态生成的部分（如 `menu-v15rco8kc2`）时，无法用通配符 `*` 直接匹配，但可通过 css 属性选择器（如 `[id^='menu-']`）精准定位变动中的元素。
在现代前端开发中，尤其在基于 CSS Modules 或服务端渲染（SSR）/构建工具（如 Webpack、Vite）生成的类名或 ID 场景下，DOM 元素的 id 或 class 常含哈希后缀（如 v15rco8kc2），导致传统固定选择器失效。此时，CSS 属性选择器（Attribute Selectors） 是标准、高效且无需依赖额外库的解决方案。
✅ 推荐方案：使用属性选择器匹配动态 ID
CSS 提供了多种属性匹配模式，适用于不同场景：
| 选择器 | 含义 | 示例 |
|---|---|---|
[id^='menu-'] |
ID 以 "menu-" 开头 |
匹配 menu-v15rco8kc2、menu-abc123
|
[id$='-kc2'] |
ID 以 "-kc2" 结尾 |
匹配 v15rco8kc2、xyz-kc2
|
[id*='menu'] |
ID 中包含 "menu" 子串 |
匹配 menu-v15rco8kc2、submenu-v9
|
针对原始问题中的选择器：
document.querySelector("#menu-v15rco8kc2 > div:nth-child(1) > button > span.Typography-module__lVnit.Typography-module__Nfgvc.Button-module__Imdmt")可安全替换为：
立即学习“前端免费学习笔记（深入）”；
document.querySelector("[id^='menu-'] > div:nth-child(1) > button > span.Typography-module__lVnit.Typography-module__Nfgvc.Button-module__Imdmt");✅ 该写法不依赖具体哈希值，只要 id 始终以 "menu-" 开头即可稳定命中目标元素。
⚠️ 注意事项与最佳实践
避免过度依赖动态 ID：若可控，建议改用语义化
data-*属性（如<div data-menu-root>），更符合可维护性原则：<pre class="brush:php;toolbar:false;">document.querySelector("[data-menu-root] > div:first-child > button > span.Button-module__Imdmt");</pre><li><p><strong>性能考量</strong>：属性选择器比 ID 选择器稍慢，但在现代浏览器中差异微乎其微；避免在高频操作（如 scroll、resize）中重复调用 <code>querySelector，应缓存结果。兼容性：
[attr^=value]等属性选择器自 IE7+ 起即被广泛支持，无兼容性风险。-
组合增强鲁棒性：可叠加多个条件提升准确性，例如：
// 同时校验 id 前缀 + class 存在 + 父容器角色 document.querySelector("nav [id^='menu-'].menu-container > div > button span.Button-module__Imdmt");
✅ 总结
面对动态生成的 DOM 标识符，放弃“硬编码 ID”的思维，转向 CSS 属性选择器是标准、简洁且可持续的工程实践。[id^='prefix'] 是最常用也最可靠的模式；配合语义化 data-* 属性与合理缓存策略，可构建高稳定性、易维护的 DOM 操作逻辑。
