属性选择器应写为[data-status="active"]，引号非必需但值含空格或特殊字符时必须使用；常见错误包括等号误作冒号、大小写不匹配及IE8不支持^=、$=等扩展语法。
属性选择器怎么写才匹配到带 data-status="active" 的元素
直接用 [data-status="active"] 就行，但要注意引号不是必须的——[data-status=active] 也合法，前提是值不含空格、特殊字符或以数字开头。一旦值是 "123abc" 或 "pending-2024"，不加引号会解析失败。
常见错误是把等号写成冒号或点号，比如 [data-status:"active"] 或 .data-status="active"，浏览器直接忽略这条规则，毫无提示。
- 值含空格（如
"in progress"）必须加引号，推荐统一用双引号 - 属性名大小写敏感，
[DATA-STATUS="active"]在 HTML 中通常不匹配，因为 HTML 属性默认转为小写 - HTML 中布尔属性如
disabled可写作[disabled]，不用写[disabled="disabled"]
[attr^="value"] 和 [attr$="value"] 的实际用途在哪
前缀匹配 [href^="https://"] 能一键选中所有 HTTPS 链接；后缀匹配 [src$=".svg"] 可集中处理 SVG 图片样式。它们不是“炫技”，而是避免写一堆类名的务实方案。
容易踩的坑是混淆 ^= 和 *=：前者只认开头，后者是包含任意位置。比如 [class^="btn-"] 能选中 class="btn-primary"，但选不到 class="primary-btn"；而 [class*="btn"] 两者都中，但也可能误伤 "subtle-btn-wrap" 这种。
立即学习“前端免费学习笔记（深入）”；
-
[src^="/assets/"]比.asset-img更可靠——不用改 HTML 就能控制资源路径统一的元素 -
[type$="email"]可匹配type="email"和type="text/email"（如果某框架这么写），但实际中极少遇到后者 - 性能上无明显差异，但过度使用
*=可能触发更慢的字符串扫描，尤其在大量节点时
为什么 [data-id] 有时不生效，明明 HTML 里写了
最常见原因是属性没被浏览器真正解析——比如 Vue/React 模板里写的是 v-bind:data-id="id" 或 :data-id="id"，但变量 id 是 null 或 undefined，结果渲染出来压根没这个 attribute，自然选不到。
另一个隐蔽问题是动态添加属性后未触发样式重计算。例如 JS 执行了 el.setAttribute('data-loaded', 'true')，但之前没定义过 [data-loaded] 的 CSS 规则，或者规则权重太低被覆盖了。
- 用浏览器开发者工具 Elements 面板右键「Reveal in Elements panel」，确认该属性确实存在于 DOM 节点上（不只是渲染结果）
- 检查是否拼错属性名，比如
data-user-id写成data-user_id，CSS 里却用[data-user_id] - Shadow DOM 内部的属性选择器只作用于影子树内，不能穿透到宿主元素
IE8 兼容时属性选择器有哪些硬限制
IE8 支持基础属性选择器，但仅限于 [attr]、[attr="val"]、[attr~="val"]（空格分隔列表）、[attr|="val"]（连字符前缀），其余一概不支持。也就是说，^=、$=、*=、!= 在 IE8 下完全无效，且不会报错，只是静默忽略。
如果你的项目仍需兼容 IE8，就别指望用 [href^="tel:"] 匹配电话链接了，老老实实用类名或 JS 补齐。
-
[data-role="button"]安全；[data-role*="btn"]不安全 - 值中的引号在 IE8 中必须是英文双引号，单引号或中文引号会导致整条规则失效
- 属性名不能含大写字母，
[DataId]不匹配dataid，哪怕 HTML 写的是dataid="1"
现代项目基本不用再考虑这些，但接手老系统时，看到样式突然在某个页面失效，先查查是不是用了 IE8 不认的选择器——这种问题藏得深，调试起来比拼写错误还费时间。
