唯一精确匹配属性值的写法是[attr="value"]；~=和*=仅为模糊匹配，|=仅适用于连字符分隔场景如lang，而不可见字符需js清洗后处理。
[attr] 能匹配任意含该属性的元素，但不关心值；真正“精确匹配”必须用 [attr="value"] —— 这是唯一能确保属性值完全一致的选择器写法。
匹配带特定值的属性，必须用等号
很多人误以为 [attr~="value"] 或 [attr*="value"] 是“精确匹配”，其实不是：~ 只匹配空格分隔的独立单词，* 是子串模糊匹配。只有 = 才做全值比对。
-
input[type="submit"]只命中<input type="submit">，不会选中type="button"或type="submit-primary" -
img[alt="logo"]不会匹配alt="logo icon"（含空格）或alt="main-logo"（含连字符） - 若属性值含引号、转义符或 Unicode 空格，CSS 解析时已标准化，无需额外处理
区分 ^=、$=、*= 的实际边界
这三类“部分匹配”容易混淆，关键看匹配位置和是否要求完整语义：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
a[href^="https://"]：只认协议+冒号双斜杠开头，https:或https//都不匹配 -
img[src$=".webp"]：结尾必须严格是.webp，.webp?v=1因含?不匹配 -
[data-id*="user-"]：只要字符串中出现user-即可，data-id="user-123"、"admin-user-456"都命中
注意 |= 专用于语言码等带连字符的场景
[lang|="zh"] 看似像 ^=，但行为不同：它匹配 lang="zh" 或 lang="zh-CN"，不匹配 lang="zhCN" 或 lang="zho"。本质是“以指定值开头且后跟连字符或字符串结束”。
- 典型用途只有
lang、data-*中按命名空间组织的属性 - 不要用它替代
^=处理普通 URL 或 class 名，否则逻辑错位 -
[class|="btn"]无法匹配class="btn btn-primary"，因为class是空格分隔，不是连字符分隔
真正难的是属性值里混了不可见字符（比如 BOM、零宽空格），这类问题 CSS 选择器无能为力，得靠 JavaScript 先清洗再匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
