[class$="btn"]不生效是因为class属性值是空格分隔的完整字符串，它只匹配以"btn"结尾的整个值（如"submit-btn"），不匹配"btn primary"（结尾为"primary"）或"primary btn"（虽以"btn"结尾但非常规用法）；正确方式是用[class~="btn"]匹配独立单词。
直接用 [attr$="value"] 就能匹配属性值以指定字符串结尾的元素，但必须清楚它只看整个属性值的末尾，不是“文件扩展名”或“类名片段”这种语义匹配。
为什么 [class$="btn"] 大概率不生效
因为 class 属性值是空格分隔的多个类名组成的完整字符串，[class$="btn"] 只会匹配 class="submit-btn" 这种整个属性值以 btn 结尾的情况，而不会匹配 class="btn primary" 或 class="primary btn" —— 后两者属性值分别以 primary 和 btn 结尾，但中间有空格，结尾实际是 primary 和 btn 吗？不，class="primary btn" 的属性值就是字符串 "primary btn"，它以 "btn" 结尾，所以这个能命中；但 class="btn primary" 是以 "primary" 结尾，就完全不匹配。
- 真正想匹配含某个类名的元素，应该用
[class~="btn"]（单词匹配）或 JavaScript - 如果框架生成的类名有固定后缀且独占整个 class 值（比如
class="card__header"），那[class$="__header"]才可靠 - 更安全的做法是把语义信息挪到自定义属性里，比如
data-type="button"，再用[data-type$="button"]
[href$=".pdf"] 为什么有时失效
常见原因是 URL 带查询参数或 hash，比如 href="report.pdf?version=2" 或 href="doc.pdf#page=3"，这时属性值结尾不是 .pdf，而是 =2" 或 =3"。
- 确保目标 URL 确实以你要匹配的字符串**严格结尾**，不含额外字符
- 需要兼容大小写时，加
i标志：a[href$=".PDF"i]，但注意 IE 不支持 - 要同时匹配多个后缀（如
.jpg和.png），只能写两条规则：img[src$=".jpg"], img[src$=".png"]
匹配 data- 属性时的典型用法
自定义 data- 属性是最适合用 $= 的场景，因为值由你控制，结构干净，无空格干扰。
立即学习“前端免费学习笔记（深入）”；
- 例如：
div[data-id$="-tienda"] { background: #f0f8ff; }能精准选中<div data-id="store-123-tienda"> - 避免在
data-值里混用斜杠、问号等 URL 特有字符，否则结尾判断容易出错 - 如果后缀是动态拼接的（如
data-role="modal-footer"），且你只想匹配所有-footer结尾的，[data-role$="-footer"]就比正则更轻量、兼容性更好
真正难的不是写对选择器，而是判断目标信息是否真的落在一个可被 $= 安全消费的属性值里——如果它分散在多个类名中、嵌在 URL 参数里、或依赖运行时生成，那 CSS 层面基本无解，得切到 JS 处理。
