属性选择器中[attr]匹配属性存在性，[attr="value"]要求值完全相等，[attr~="val"]用于空格分隔的单词匹配，[attr^="val"]和[attr$="val"]分别匹配前缀与后缀。
用 [attr] 选择有某属性的元素，但要注意它不校验值
当你只想选中带有 data-id 的所有元素，不管它的值是什么，[data-id] 就够了。它匹配的是“存在性”，不是“内容”。常见误用是以为写了这个就能筛出某个具体值，结果发现全选中了。
- ✅ 正确场景：给所有带
disabled属性的按钮加灰显样式 ——button[disabled] { opacity: 0.5; } - ❌ 错误预期：用
[class]代替.btn来选 class="btn" 元素 —— 它也会匹配class="btn primary"甚至class=""（只要属性存在） - ⚠️ 注意：HTML 中布尔属性如
checked、required，即使没写值（如），CSS 仍能用[required]匹配到
[attr="value"] 精确匹配完整字符串值
这是最严格的一种匹配，要求属性值与引号内字符串完全一致，包括大小写、空格、顺序。适合配置类、状态类固定值的场景。
- ✅ 推荐用法：匹配明确的
type值 ——input[type="submit"]不会误伤type="reset" - ❌ 常见坑：class 属性含多个值时不能用等号匹配 ——
[class="btn"]无法匹配class="btn primary"，因为值不是“完全等于” - ? 提示：值中含特殊字符（如点、括号）必须加引号，否则解析失败 ——
[data-uid="abc.123"]合法，[data-uid=abc.123]会被当成两个 token 解析
用 [attr~="val"] 匹配空格分隔的单词（比如 class）
当属性值是空格分隔的单词列表（典型如 class、rel），~="val" 是唯一安全的选择方式。它把值按空格切开，逐个比对，类似 JS 的 classList.contains()。
- ✅ 正确写法：
[class~="btn"]可以匹配class="btn"、class="btn primary"、class="primary btn secondary" - ❌ 不要用
=或^=替代 —— 它们要么太死板，要么可能误中前缀（比如btn-primary） - ⚠️ 注意：只认空格分隔，不识别制表符或换行；且对大小写敏感 ——
[class~="Btn"]不会匹配class="btn"
[attr^="val"] 和 [attr$="val"] 用于前缀/后缀匹配，慎用于 class
这两个是子串级匹配，性能略低于精确匹配，且容易产生意外命中。它们真正适用的场景是 URL、ID、自定义 data 属性等结构可控的字段。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理用法：
a[href^="https://"]标记外链，[id$="-modal"]批量选模态框节点 - ❌ 避免用于 class：
[class^="btn"]会错误匹配class="btn-group"，但漏掉class="primary btn"（因为不是开头） - ? 性能提示：浏览器对
^=和$=无法利用哈希索引，DOM 节点多时可能变慢；若需高频匹配，优先用 class +.选择器
[data-status="active"] { color: green; }
[data-status~="warning"] { background: #fff3cd; }
img[src$=".webp"] { image-rendering: -webkit-optimize-contrast; }
[data-id^="user-"] { cursor: pointer; }
属性选择器的高效关键不在“多用”，而在“用对”。最容易被忽略的是：浏览器对不同操作符的底层匹配逻辑完全不同 —— ~="val" 是分词查表，^="val" 是字符串扫描，而 ="val" 才是直接比引用。选错操作符，轻则样式失效，重则拖慢渲染。 
