17370845950

属性选择器中[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" 才是直接比引用。选错操作符，轻则样式失效，重则拖慢渲染。