属性选择器是css语法，需用方括号[]包裹属性名或带值表达式；[type]正确，["type"]无效；[data-id="user-123"]正确，[data-id=user-123]遇连字符或空格会解析失败；大小写敏感，需用[type="submit" i]忽略；class等空格分隔属性应使用[class~="btn"]而非[class="btn"]。
属性选择器不是 HTML 功能，是 CSS 语法；它不修改 HTML，只匹配已存在的属性——写错拼写、大小写或连字符，就完全不生效。
怎么写才能被浏览器识别
必须用方括号 [] 包裹，里面直接写属性名或带值表达式，不加引号的只有属性名，值必须加引号：
-
[type]正确；["type"]是无效语法 -
[data-id="user-123"]正确；[data-id=user-123]遇到连字符或空格会解析失败 -
[href^="http"]比[href^="https"]更稳妥——前者能覆盖 http 和 https，后者漏掉纯 http 链接 - HTML 属性本身不区分大小写，但 CSS 选择器默认区分：
[type="SUBMIT"]不匹配<button type="submit"></button>，得写成[type="submit" i]
为什么 [class="btn"] 总是选不到元素
因为 class 是空格分隔的单词列表，[class="btn"] 要求整个 class 属性值**完全等于** "btn"，而实际可能是 class="btn large primary"。
- 改用
[class~="btn"]：匹配 class 中任意一个独立单词为 "btn" - 更推荐用类选择器
.btn：语义清晰、性能更好、编辑器支持强 - 同理，
[rel="noopener noreferrer"]也几乎没用，应改用[rel~="noopener"]
data-* 属性选择器失效的常见原因
React、Vue 或 SSR 场景下，[data-user-id] 看似写了，但 DOM 里根本没渲染出来——这是最常被忽略的根源。
- 检查浏览器开发者工具 Elements 面板，确认属性真实存在（不是 JS 动态插入的）
- 属性名必须原样写出：
data-user-id≠dataUserId≠data_user_id - 值为
null、undefined或空字符串时，框架通常不会渲染该属性，选择器自然失效 - 服务端渲染中 hydration 不同步，可能导致首屏样式丢失或闪动
哪些写法性能差、该避开
单个 [disabled] 或 [type="text"] 几乎无开销，但以下组合在大列表或高频更新区域会拖慢重绘：
-
[class*="foo"]、[title*="error"]：子串匹配需逐字符扫描，DOM 越大越慢 -
div.container [data-role="menu"] > ul li a[title]：嵌套深 + 属性过滤，浏览器难走快速索引路径 -
[style]：内联 style 可能被 JS 频繁增删，匹配不稳定，且语义模糊 - 布尔属性如
[checked]、[disabled]直接写存在即可，不用[checked="checked"]
真正关键的不是“能不能写”，而是“DOM 里有没有、拼对没、值是不是真被渲染了”——所有调试都该从 Elements 面板开始，而不是反复改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
