[attr="value"]效率最高，因其是纯子串匹配，适配data-等无空格属性值；而[attr~="value"]仅匹配空格分隔单词，对data-*几乎无效，且css原生支持避免js介入，声明式绑定更高效可靠。
[attr^="val"]、[attr$="val"]、[attr*="val"] 这三种匹配方式是 CSS3 相比 CSS2 新增的核心属性选择器语法，它们解决了「模糊字符串匹配」的刚需，而 CSS2 仅支持 [attr] 和 [attr="val"] 这类精确存在或完全相等的判断。
为什么只靠 CSS2 的 [attr="val"] 不够用？
实际 HTML 中，属性值常带前缀、后缀或嵌套内容，比如：class="btn btn-primary"、data-id="user-123"、src="/assets/logo.svg"。若硬要用 CSS2 写，只能靠冗余 class 或 JS 拆解，既污染结构又增加维护成本。
[attr^="val"] 匹配开头值（最常用）
典型场景是统一控制某类 input 或 icon 元素：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
input[type^="text"]能同时命中type="text"、type="search"、type="tel"—— 避免逐个写input[type="text"], input[type="search"], ... -
[class^="icon-"]可选中所有以icon-开头的 class，如icon-home、icon-user，无需为每个图标单独加 class - 注意：不区分单词边界，
[lang^="en"]会匹配lang="en-us"，但也会误匹配lang="entire"（如果存在）
[attr$="val"] 匹配结尾值（文件/路径处理利器）
适合按扩展名或固定后缀批量样式化：
-
img[src$=".png"]给所有 PNG 图片加边框，img[src$=".jpg"]单独设阴影 -
a[href$="/"]标记所有目录链接（URL 以/结尾），方便视觉区分 - ⚠️ 注意：不能写成
src$="png"（漏掉点），必须是完整后缀，包括点号和大小写 ——.PNG不会被[src$=".png"]匹配
[attr*="val"] 匹配任意位置子串（灵活性最高，也最容易误伤）
适用于含关键词但结构不固定的场景：
-
a[href*="example.com"]高亮所有指向 example.com 的外链，不管路径深浅 -
[data-role*="modal"]选中data-role="confirm-modal"或data-role="modal-overlay" - ⚠️ 性能略低：浏览器需对每个元素的属性值做字符串扫描；慎用于高频重绘区域（如滚动列表）
- ⚠️ 易误匹配：
[title*="test"]会命中title="testing"、title="contest"，不是精确词匹配
[attr^="val"] 和 [attr$="val"]，但 IE8 才开始支持 [attr*="val"]；现代项目虽基本不用考虑 IE，但若需支持旧内核 WebView（如某些金融/政务 App），仍要验证运行环境。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
