[src*="path"] 只匹配 src 属性值中实际包含该字符串的 img 元素，不匹配 base64、data url、js 动态设置或重定向后的 url，且大小写敏感，需注意相对路径、data-src 替代、cdn 前缀、文件后缀等匹配场景。
直接用 [src*="path"] 可以匹配并隐藏含指定路径的图片，但要注意它只作用于 src 属性值中实际包含该字符串的 <img> 元素，不匹配 base64、data URL 或通过 JS 动态设置 src 的情况。
为什么 [src*="banner"] 有时不生效
常见错误现象是写了规则却没隐藏任何图片——多数因为：
- 目标图片的
src是相对路径（如./imgs/banner-1.jpg），而你写的规则是[src*="banner"]，这能匹配；但如果页面启用了 base64 图片或 SVGdata:URL，src值里根本没有 "banner" 字符串，规则自然失效 - 图片由 JavaScript 后续注入，DOM 加载完成时该
<img>标签还不存在，CSS 规则无法命中 - 服务器返回了 302 重定向，浏览器最终加载的是跳转后的 URL，而 CSS 匹配的是原始
src值（即重定向前的） - 某些 CMS 或框架会把图片路径写进
data-src而非src，此时得换用[data-src*="banner"]
[src^="https://cdn.example.com/"] 和 [src$=".webp"] 的实际用途
属性选择器支持多种匹配模式，选对才能精准拦截：
-
[src^="https://cdn.example.com/"]：只匹配以该 CDN 域名开头的图片，适合屏蔽某第三方图床下所有资源 -
[src$=".webp"]：匹配所有以.webp结尾的图片，可用于统一禁用 WebP 格式（比如旧设备兼容性问题） -
[src*="/ad/"]：比*="banner"更稳妥，路径分隔符降低了误匹配风险（避免把subbanner.jpg当成广告） - 注意：
[src~="word"]不适用——它只匹配空格分隔的单词，src是单个字符串，不是 class 列表
在用户样式扩展（如 Stylus）中安全使用该选择器
Stylus 注入的 CSS 默认全局生效，容易误伤其他网站。正确做法是限定域并加兜底：
- 必须用
@-moz-document domain("example.com") { ... }（Firefox）或@-webkit-document domain("example.com") { ... }（Chrome/Edge）包裹规则 - 优先用
display: none而非visibility: hidden，前者彻底移除渲染，后者仍占布局空间，可能造成页面错位 - 如果目标图片带
loading="lazy"，隐藏后浏览器仍会预取，想真正省流量得配合 uBlock Origin 的请求级拦截 - 示例完整规则：
@-moz-document domain("forum.example.com") {
img[src*="/avatars/"],
img[src*="/ads/"] {
display: none !important;
}
}
最易被忽略的一点：CSS 属性选择器对大小写敏感。如果服务器返回的 src 是 /BANNER.jpg，而你写 [src*="banner"]，Firefox 和 Chrome 都不会匹配——要么统一转小写处理（需 JS 辅助），要么明确写出大小写变体，或改用正则类扩展（如 Stylus 支持 /banner/i）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
