[attr] 选择器仅匹配属性存在与否，不校验值；失效主因包括属性名拼写错误、大小写不一致、值含空格未加引号、html中属性实际不存在或js动态操作导致属性丢失。

直接用 [attr] 选择器就能匹配带该属性的元素，但要注意它只判断“存在”，不校验值是否为空或是否符合预期——这是最常被忽略的前提。

为什么 [attr] 有时不生效

常见错误是把属性名写错（比如写成 [data-role] 却实际是 data-role="nav" 没问题，但若 HTML 中写成了 data_role="nav" 就完全不匹配）；另一个坑是属性值含空格或引号未闭合，导致解析失败，浏览器根本不会把那个属性当有效属性加载。

• HTML 中属性名必须严格大小写一致（data-id ≠ data-ID）
• 布尔属性如 disabled、checked 只要存在就匹配，无需写 disabled="true"
• [attr=""] 匹配空字符串值，[attr] 则连 attr="" 都匹配

[attr] 和 [attr="value"] 的行为差异

前者只要属性出现在标签上就触发样式，后者要求值完全相等（区分大小写、不可有首尾空格）。例如 input[type="text"] 不会匹配 <input type=" TEXT ">，但 input[type] 会。

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

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

下载

• 需要容错时优先用 [attr]，比如统一处理所有带 data-tooltip 的元素，不管它有没有值
• 精确控制时用 [attr="value"] 或 [attr^="prefix"] 等属性部分匹配伪类
• 注意：CSS 层叠中，[attr="value"] 的优先级略高于 [attr]（因多一个比较步骤，b 值+1）

配合伪类或组合选择器提升实用性

单独用 [attr] 很少够用，通常要叠加状态或上下文。比如修正表单中带 required 的输入框边框颜色，就得结合 :invalid 才有意义。

• input[required]:invalid { border-color: #e53e3e; } —— 只对必填且当前无效的生效
• button[data-loading]::after { content: "…"; } —— 给正在加载的按钮加提示
• 避免滥用：div[class] 这种写法看似通用，实则干扰可读性，且可能意外覆盖其他 class 规则

真正难的不是写对选择器，而是确认目标属性在 DOM 加载后确实存在——JavaScript 动态插入的元素，如果属性是后续通过 el.setAttribute() 添加的，CSS 会立即响应；但如果用 innerHTML 替换整个节点，属性可能丢失或未重解析。

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