应使用 [src*="keyword"] 匹配图片地址含特定字符，它不区分路径层级或扩展名，只要子串出现即命中；注意大小写敏感，现代浏览器支持 [src*="keyword" i] 忽略大小写，而 [src~="..."] 和 [src|="..."] 不适用于 url 匹配。
用 [src*="keyword"] 匹配图片地址含特定字符
要选中 <img> 标签里 src 属性包含某个子串（比如 "logo" 或 "thumb"）的元素，直接用属性包含选择器 [src*="..."] 最有效。它不区分路径层级或文件扩展名，只要字符串出现就命中。
常见错误是误用 [src^="..."]（只匹配开头）或 [src$=".png"]（只匹配结尾），结果漏掉 https://cdn.example.com/v2/assets/logo-dark@2x.jpg 这类带路径和参数的 URL。
-
[src*="logo"]能匹配src="logo.png"、src="/images/app-logo.svg"、src="https://a.b/c?d=logo&e=1" - 注意大小写敏感：如果 HTML 中写的是
LOGO，而 CSS 写[src*="logo"]，不会匹配（除非加i标志，见下一条） - 若需忽略大小写，写成
[src*="logo" i]—— 但仅在现代浏览器（Chrome 63+、Firefox 61+、Safari 15.4+）支持，IE 完全不支持
为什么不用 [src~="..."] 或 [src|="..."]
这两个选择器完全不适合匹配 URL 字符串：[src~="logo"] 要求 logo 是一个**以空格分隔的独立单词**，而 src 值从来不是空格分隔的；[src|="logo"] 只匹配以 logo 开头且后跟 - 或完整相等的值（如 logo-dark 或 logo），对 mylogo.png 或 assets/logo.svg 都无效。
简单说：处理 URL 子串查找，只有 *（包含）、^（开头）、$（结尾）这三种属性操作符有意义，其余两个基本用不上。
配合 <img> 标签限定范围更安全
直接写 [src*="icon"] 会匹配所有含 icon 的元素（比如 <link rel="icon">、<meta property="og:image">），不一定是你想要的图片 DOM。
- 加标签名前缀：
img[src*="icon"]确保只作用于<img> - 如果项目用自定义元素（如
<my-img></my-img>），就写my-img[src*="icon"] - 避免全局污染：别用
[src*="icon"]加到通用重置样式里，容易误伤第三方组件
真实场景中要注意路径动态性和 CDN 参数
前端打包或 CDN 服务常给图片加哈希、版本号或查询参数，例如：src="button-bg.a1b2c3.png?v=2" 或 src="https://cdn.com/logo-2024@2x.webp?width=320"。这时候靠固定后缀（如 [src$=".png"]）不可靠。
更健壮的做法是提取业务语义关键词：
- 用
img[src*="logo"]而非img[src$=".svg"]—— 因为 logo 可能是 PNG、WEBP 或 SVG - 用
img[src*="user-avatar"]而非img[src^="/uploads/"]—— 后者一旦换 CDN 域名或路径结构就失效 - 如果关键词本身易冲突（比如
"img"出现在很多 URL 里），可加短横线锚定：[src*="-avatar"]比[src*="avatar"]更精准
真正难的不是写对选择器，而是想清楚「这个图片在业务逻辑里叫什么」—— 名字比路径更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
