属性选择器匹配的是html属性是否存在，而非dom property值；需显式写入html属性或用setattribute添加，dataset设置需注意渲染时机，ie8仅支持标准属性且须加引号。

属性选择器怎么写才真正生效

只写 [disabled] 是对的，但实际不生效往往不是语法错，而是 DOM 上根本没这个属性——哪怕元素看起来是禁用状态。浏览器只认显式存在的 HTML 属性，不认 JS 设置的 disabled = true 这种赋值（除非同时写了 disabled="" 或 disabled="disabled"）。

• HTML 中必须真实存在该属性：比如 <button disabled></button> 或 <input 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></button>，但如果写成 [disabled].btn，虽然结果相同，可读性差，且某些老浏览器解析不稳定。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 多个属性并存时，用空格分隔表示后代，用连写表示同一元素：[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] 依然会生效——这和视觉状态可能完全相反。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！