[href*="关键词"] 是纯子串匹配，不解析url结构、大小写敏感、不支持通配符或正则，易误匹配参数或协议部分；精准匹配路径需js预处理提取pathname存入data-path后用属性选择器匹配。
用 [href*="关键词"] 做纯文本子串匹配最直接
只要 href 属性值里任意位置连续出现目标字符串，就能命中。比如 [href*="github"] 会匹配 https://github.com/user、//github.io/docs，甚至 mailto:team@mygithub.com——因为它们的 href 值里都含 “github” 这个连续子串。
注意它不解析 URL 结构，也不做大小写转换：[href*="PDF"] 不会匹配 .pdf；中文需确保 HTML 中未编码，[href*="下载"] 要求属性值里真写了“下载”，不是 %E4%B8%8B%E8%BD%BD。
- 只支持原样字符串查找，不支持通配符（
*、?）、正则或转义 - 大小写敏感，无法靠标志位忽略（不像
$=有i） - 动态插入的链接（如 JS 后续加的
a）不会自动生效，得手动重查或监听
[href*="api"] 为什么常误中非 API 链接
因为它是无上下文的子串扫描，只要字符连着出现就匹配。典型误伤：
-
[href*="api"]→ 匹配/user?tab=profile&api_key=123（参数里有api） -
[href*="com"]→ 几乎匹配所有 HTTPS 链接（https://example.com含com） -
[href*="file"]→ 可能撞上file://协议，也可能误中filename=report这类查询参数
这不是选择器错了，而是需求和匹配逻辑错位：你想要的是“路径部分含 api”，但它只认“整个属性字符串含 api”。真要精准，得靠 JS 提前把 new URL(el.href).pathname 提取出来，存到 data-path，再用 [data-path*="api"]。
想匹配路径段而非整个 href，别硬啃属性值
浏览器不提供“URL 解析后匹配路径”的原生 CSS 语法。硬写 [href*="/api/v2/"] 看似合理，但一遇到协议省略（//api.example.com）、带参数（/api/users?id=1）、或 hash（/api/logs#error），就极易漏或偏。
更稳的做法是前端预处理：
- 遍历所有
a[href]，用new URL(el.href).pathname提取纯路径 - 把结果写入
data-path属性：el.dataset.path = pathname - 之后用
[data-path*="/api/"]或[data-path^="/api/v2/"]匹配，完全避开协议、参数、hash 干扰
这样写的规则可预测、易调试，也方便后续扩展（比如加 data-ext 专管后缀）。
组合使用时顺序和引号不能错
多个属性条件并列没问题，比如 a[href*="docs"][href^="https://"] 表示“既含 docs 又以 https:// 开头”，但要注意：
- 引号必须是英文双引号：
"docs"✅，‘docs’或“docs”❌ - 特殊字符如
/、?、空格必须加引号，否则解析失败 - 布尔属性如
disabled不能写成disabled="false"——存在即为 true，CSS 里[disabled]才有效
真正难的不是语法，而是想清楚你要匹配的是 URL 字符串本身，还是它背后代表的资源语义。前者用 *= 快但糙，后者得靠 JS 拆解再挂 data 属性——这点容易被跳过，结果调半天发现样式时灵时不灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
