属性值完全匹配需用引号包裹，如[data-status="active"]；忽略大小写加i标志，如[lang="en" i]；布尔属性仅用[attr]形式；动态更新须用setattribute而非dataset。
![css 想根据属性值设置样式怎么做_使用属性值选择器 [attr=value]](https://img.php.cn/upload/article/000/969/633/176863537061426.jpeg)
直接用 [attr="value"] 就能匹配属性值完全相等的元素，但要注意引号、大小写和空格细节，否则样式不生效。
属性值完全匹配：用双引号或单引号包裹值
HTML 中属性值带空格、特殊字符或纯数字时，不加引号在 CSS 里会解析失败；即使 HTML 里省略了引号，CSS 选择器也必须显式加引号。
-
[data-status="active"]✅ 正确（推荐统一用双引号） -
[data-status=active]❌ 可能失效，尤其当active是变量名或含连字符时 -
[type='submit']✅ 单引号也可，但别混用（如[type="submit"]和[type='submit']在同一项目里保持一致）
忽略大小写匹配：加 i 标志符
默认是大小写敏感的，比如 [lang="en"] 不会匹配 lang="EN"。需要忽略大小写就加 i（放在右括号前，不加空格）：
[lang="en" i] { color: blue; }
[data-role="header" i] { font-weight: bold; }
注意：i 标志只在现代浏览器支持（Chrome 63+、Firefox 61+、Safari 15.4+），IE 完全不支持。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点：空格、布尔属性、动态更新
这些地方最容易让样式“看起来写了却没反应”：
- HTML 属性值前后有空格 →
<div data-type=" error "> 不会被 <code>[data-type="error"]匹配（得用 JavaScript trim 后设置，或改用属性存在选择器[data-type]） - 布尔属性如
disabled、checked→button[disabled]有效，但button[disabled="true"]无效（因为 DOM 中它没有值，只是存在） - JS 动态改属性后样式不更新 → 确保是用
el.setAttribute('data-state', 'done')，而不是直接赋值el.dataset.state = 'done'（后者不会触发属性选择器重算，除非同时调用el.setAttribute） - 开头匹配：
[class^="btn-"]→ 匹配class="btn-primary" - 结尾匹配：
[src$=".png"]→ 匹配 PNG 图片 - 包含单词（空格分隔）：
[class~="hidden"]→ 匹配class="col hidden" - 包含子串（慎用，性能差）：
[alt*="logo"]→ 匹配alt="top-logo"
比完全匹配更灵活的写法
如果只需要部分匹配，别硬套 [attr="value"]，换用其他属性选择器：
真正需要精确控制时，[attr="value"] 最可靠；但只要业务逻辑允许模糊匹配，优先选 ^= 或 ~=，它们语义更清晰、容错更强。
