CSS属性选择器[attr^="val"]匹配属性值开头、[attr$="val"]匹配结尾，仅作用于属性值字符串，大小写敏感（可加i标志忽略），不支持类名后缀或跨属性AND逻辑，性能与语义需权衡。
能直接用 CSS 实现属性值开头/结尾匹配，但必须明确：它只作用于属性值（value），和属性名（name）无关；不支持类名后缀、文件扩展名智能解析、大小写忽略（除非显式加 i 标志）。
怎么写[attr^="value"]匹配开头
这是最常用的前缀匹配方式，语法简单但容易误读为“匹配类名以 btn- 开头”，其实它匹配的是整个属性值字符串的起始位置。
-
[href^="https://"]→ 匹配<a href="https://example.com">，但不匹配http://或带空格的https:// -
[class^="btn-"]→ 匹配class="btn-primary"和class="btn-primary btn-lg"（因为整个class属性值是字符串"btn-primary btn-lg"，确实以"btn-"开头） - 大小写敏感：
[data-role^="Nav"]不会匹配data-role="nav-item"；如需忽略，写成[data-role^="nav" i]（现代浏览器均支持） - 别用来替代 class 选择器——
.btn-primary比[class^="btn-"]更快、更可控、语义更清晰
怎么写[attr$="suffix"]匹配结尾
结尾匹配适用于 src、href、data-* 等含明确后缀信息的属性，但要注意它不是“提取扩展名”，而是纯字符串比对。
-
img[src$=".webp"]→ 匹配<img src="logo.webp">，但不匹配<img src="logo.webp?v=1">（末尾不是.webp） -
a[href$=".pdf"]→ 可用于统一加 PDF 图标，但需确保链接路径规范，避免查询参数干扰 - 不能用于 class 名后缀筛选：
[class$="primary"]会错误命中class="my-primary"，也匹配class="primary-extra"（因 class 值是完整字符串） - 想靠语义后缀驱动样式？改用
data-variant：button[data-variant$="primary"]更安全、可读性更强
为什么[attr^="val"]和[attr$="val"]不能混用判断文件类型
这两个选择器独立工作，无法组合出“既以 https:// 开头、又以 .png 结尾”的复合逻辑——CSS 不支持 AND 多条件跨属性联合判断（a[href^="https://"][href$=".png"] 是合法语法，但它要求同一个 href 同时满足两个条件，不是“任意一个”）。
立即学习“前端免费学习笔记（深入）”；
- 这种写法在技术上可行，但实际中极少需要：一个 URL 很难同时以
https://开头、又以.png结尾（中间必然有路径） - 若真要筛 HTTPS 下的 PNG 图片，应确保路径规范，比如全部走
/assets/xxx.png，再用img[src^="/assets/"][src$=".png"] - 更健壮的做法是服务端或构建时注入
data-type="image/png"，然后用img[data-type="image/png"]精确匹配 - 性能上，多属性连用会略微拖慢选择器计算，尤其在长列表中频繁重绘时
最容易被忽略的兼容性与语义陷阱
现代项目基本不用考虑 IE6，但仍有几个点常被跳过：
-
[attr|="val"]不是前缀匹配，它是专为语言代码设计的，等价于[attr="val"]或[attr^="val-"]，别拿它当通用方案 - 所有属性选择器在 IE7+ 支持，但
[attr^="val" i]的i标志在 IE 中完全不支持（Edge 12+ 才开始支持） - 如果目标是批量操作 data-* 属性元素，CSS 无解——必须用 JS：
document.querySelectorAll('[data-id], [data-category]')或统一加 class - 真正难的从来不是怎么写对选择器，而是想清楚：你是在做样式隔离，还是在用属性 hack 替代 class 设计？后者长期看反而增加维护成本
