属性选择器匹配的是HTML属性是否存在，而非DOM property值；需显式写入HTML属性或用setAttribute添加，dataset设置需注意渲染时机，IE8仅支持标准属性且须加引号。
![css如何根据属性是否存在来匹配_只需中括号内写属性名如[disabled]](https://img.php.cn/upload/article/000/969/633/177414918177156.jpeg)
属性选择器怎么写才真正生效
只写 [disabled] 是对的，但实际不生效往往不是语法错，而是 DOM 上根本没这个属性——哪怕元素看起来是禁用状态。浏览器只认显式存在的 HTML 属性，不认 JS 设置的 disabled = true 这种赋值（除非同时写了 disabled="" 或 disabled="disabled"）。
- HTML 中必须真实存在该属性：比如
<button disabled></button>或<input disabled="disabled">，CSS 才能匹配到[disabled] - JS 动态控制时，别只改 property：
el.disabled = true不会添加属性，得补上el.setAttribute('disabled', '') -
[disabled=""]和[disabled]效果一样，但前者更明确；[disabled="true"]反而可能不匹配——因为原生disabled是布尔属性，值不参与语义判断
为什么 [data-id] 有时匹配不到
自定义属性（data-*）必须由 HTML 源码写入，或用 setAttribute 添加，不能靠 dataset API“悄悄”设置。比如 el.dataset.id = '123' 会生成 data-id="123"，但得等下一次渲染周期或强制重排后才可被 CSS 选中。
- 服务端渲染或静态 HTML 里直接写
<div data-id="abc"></div>，[data-id]立刻生效 - 纯客户端渲染时，确保
setAttribute('data-id', 'abc')在样式计算前执行，避免因异步导致样式未应用 -
[data-id="abc"]区分大小写，且要求完全相等；[data-id]只要属性存在就匹配，不管值是什么
attribute 选择器和 class 选择器混用要注意什么
属性选择器优先级和 class 一样（都是 0,1,0），但组合时容易误判覆盖关系。比如 .btn[disabled] 能命中 <button class="btn" disabled>，但如果写成 [disabled].btn，虽然结果相同，可读性差，且某些老浏览器解析不稳定。
- 多个属性并存时，用空格分隔表示后代，用连写表示同一元素：
[data-a][data-b]表示同时有这两个属性，[data-a] [data-b]表示后者是前者的后代 - 带伪类时注意顺序：
[disabled]:hover合法，:hover[disabled]在部分浏览器里不支持（尤其旧版 Safari） - 属性值含特殊字符（如点、括号）必须加引号：
[data-name="user.list"]，否则解析失败
IE8 兼容下 attribute 选择器的坑
IE8 支持基础属性选择器，但仅限于 HTML 标准属性（如 id、class、disabled、checked），不支持 data- 开头的自定义属性。而且它不区分大小写，但若 HTML 是 XHTML 模式，又可能因命名空间问题失效。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE8 时，避免用
[data-*]做关键样式控制，改用 class 或id -
[type="checkbox"]可用，但[type=checkbox]（无引号）在 IE8 下可能失败，务必加引号 - IE8 不支持属性值包含空格或特殊符号的匹配，例如
[title~="foo"]（单词匹配）或[title|="en"]（前缀匹配）均不可用
最常被忽略的一点：属性选择器匹配的是「属性是否存在」，而不是「对应 DOM property 的当前值」。JS 改了 input.checked = false，只要没调用 removeAttribute('checked')，[checked] 依然会生效——这和视觉状态可能完全相反。
