[href*="关键词"] 是纯文本子串匹配选择器，大小写敏感且不支持正则，可组合其他属性（如^=、$=）提升精度，但需注意动态插入内容需重新查询、href值为原始字符串而非解析后url。
用 [href*="关键词"] 匹配链接地址中的子串
这个选择器能直接命中 href 属性值里**任意位置包含指定字符串**的 <a></a> 标签，不区分协议、路径层级或参数顺序。比如 [href*="github"] 会同时匹配 https://github.com/user/repo、//github.io/docs，甚至 mailto:team@mygithub.com —— 只要属性值里有连续的 "github" 就算。
注意它不是正则，不支持通配符（如 * 或 ?）或转义，只做纯文本子串查找；大小写敏感，[href*="PDF"] 不会匹配 .pdf。
避免误匹配：警惕协议、参数和拼写干扰
常见误伤场景包括：
-
[href*="api"]会同时选中/api/users和/user?tab=profile（因为 URL 参数里有api字样） -
[href*="com"]几乎匹配所有 HTTPS 链接（https://example.com里含com） - 中文或特殊字符需确保 HTML 中编码一致，比如
[href*="下载"]要求href属性值里确实是未编码的“下载”，而非%E4%B8%8B%E8%BD%BD
结合其他属性提升精度：用 [href^="https://"] 或 [href$=".pdf"]
单靠 *= 容易宽泛，实际项目中常组合使用：
- 限定协议：
a[href^="https://"][href*="github"]排除http://和ftp:// - 限定后缀：
a[href$=".pdf"][href*="manual"]找手册类 PDF - 排除内链：
a[href*="example.com"]:not([href^="/"]):not([href^="#"])（注意:not()不能嵌套伪类）
浏览器对多属性选择器的支持很稳定，但过度嵌套（如四层以上）可能轻微拖慢样式计算，尤其在大量链接的页面上。
JavaScript 动态操作时，document.querySelectorAll('[href*="xxx"]') 返回的是静态 NodeList
如果页面后续通过 JS 插入新链接，这些新增节点不会自动进入之前查到的列表。需要重新执行查询：
const githubLinks = document.querySelectorAll('a[href*="github"]');
// 后续插入新链接后
const updatedLinks = document.querySelectorAll('a[href*="github"]'); // 必须重查
另外，href 属性值是 HTML 中写的原始字符串，不是解析后的完整 URL —— 比如 <a href="/doc"></a> 的 getAttribute('href') 返回 /doc，不是 https://site.com/doc。若需绝对路径，请用 element.href（只读属性，返回解析后地址）。
真正难处理的是那些 href 值被 JS 动态改写、或用 data-url 等自定义属性存地址的情况 —— 这时候 [href*="xxx"] 完全失效，得换思路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
