[attr$="suffix"]仅匹配属性值整体以指定字符串结尾，不解析文件后缀或类名单词，故[class$="__tienda"]对多值class失效，[href$=".pdf"]无法匹配带查询参数的url，且大小写敏感、不支持多后缀通配。
直接用 [attr$="suffix"] 就能匹配属性值以指定字符串结尾的元素，但必须清楚它只对整个属性值生效，不是“文件后缀解析”或“类名单词匹配”。
为什么 [class$="__tienda"] 有时不生效
因为 class 属性是空格分隔的字符串，[class$="__tienda"] 匹配的是整个属性值的末尾——比如 class="store__tienda active" 实际属性值是 "store__tienda active"，结尾是 "active"，所以不命中。
- ✅ 能匹配：
class="e-top__tienda"、class="a-der__tienda" - ❌ 不匹配：
class="shop__tienda extra"、class="primary__tienda secondary" - 如果必须支持多 class 场景，改用
data-variant或data-ext这类单值属性更可靠
[href$=".pdf"] 为什么漏掉带查询参数的链接
它只看属性值字面结尾，href="report.pdf?ts=123" 的属性值以 "123" 结尾，不是 ".pdf"，所以不匹配。
- ✅ 有效：
href="doc.pdf"、href="/files/manual.pdf" - ❌ 无效：
href="file.pdf?v=1"、href=" https://site.com/a.pdf "（首尾空格也会破坏匹配） - 更健壮的做法是提前用 JS 提取后缀并写入
data-ext，再用[data-ext$="pdf"]
大小写和多个后缀怎么处理
$= 默认区分大小写，且不支持通配多个值。想同时匹配 .jpg 和 .png，不能写成 [src$=".jpg,.png"] —— 那样语法错误，浏览器直接忽略整条规则。
- 正确写法是分开声明：
img[src$=".jpg"]、img[src$=".png"] - 忽略大小写可用
i标志：a[href$=".PDF"i]（Chrome 55+、Firefox 49+、Safari 10.1+ 支持） - IE8 及更早版本完全不支持
$=，需降级为 class 手动标记或 JS 补充
真正容易被忽略的是：属性选择器匹配的是 HTML 中**写死的字符串**，不是运行时解析的结果。只要属性值没按预期结尾，再精准的选择器也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
