data-属性选择器需完全匹配值且必须加引号，attr()仅限content中使用并返回字符串，css变量不能直接绑定data-值，须通过选择器预设；动态修改需注意框架限制与shadow dom作用域。
data-* 属性选择器必须完全匹配值，引号不能省
HTML 中写了 data-theme="dark"，CSS 就得写 [data-theme="dark"] —— 缺引号、大小写错、多空格，全都不生效。浏览器不模糊匹配，也不自动 trim 或转小写（虽然属性名本身不区分大小写，但解析后统一为小写，所以 data-Theme="dark" 在 HTML 里等价于 data-theme="dark"，但 CSS 选择器仍必须用小写）。
常见失效场景：
-
[data-status=active]在旧版 Safari 或部分构建工具中可能被忽略，必须写成[data-status="active"] -
data-id="user 123"值含空格 → CSS 必须用引号：[data-id="user 123"] -
data-role="primary-button"和[data-role="button"]不匹配，值必须一字不差
attr() 只能在 content 里用，且仅限 data-* 和少数原生属性
想把 data-price 的值显示出来？只能靠 ::before 或 ::after + content: attr(data-price)。其他地方写 attr() 都是静默失效，连报错都没有。
关键限制：
-
color: attr(data-color)、width: attr(data-width px)—— 全部无效 -
attr()返回纯字符串，data-count="42"拿到的是"42"，不是数字，不能参与calc() - 只支持
data-*和title、alt、href等少数原生属性；my-id或x-label一律返回空字符串 - 拼接写法：
content: "¥" attr(data-price) " / " attr(data-unit);—— 注意空格是字面量，不是运算符
CSS 变量（custom properties）不能直接绑定 data-* 值
别写 :root { --color: attr(data-color); }，这语法虽不报错，但无任何效果。CSS 变量是静态声明的，不监听 DOM 属性变化。
真正可行的做法是：用 data-* 作为“状态开关”，在不同选择器里预设变量值：
[data-size="large"] { --font-scale: 1.25; }
[data-size="small"] { --font-scale: 0.875; }
body { font-size: calc(var(--font-scale, 1) * 1rem); }
注意点：
- 变量作用域由选择器决定，
[data-theme="dark"] { --bg: #111; }不会泄漏到外部 - JS 动态改
el.dataset.size = "large"后样式立刻更新，但若同时用了will-change: transform，可能阻碍重绘，得关掉或换用transform: translateZ(0) - Shadow DOM 中，外部样式表无法命中
[data-xxx]，必须把样式注入 shadow root 或用:host([data-open])
React/Vue 里动态设置 data-* 容易漏掉命名转换
框架对自定义属性更严格：Vue 模板写 :data-user-id="uid" 可能被警告；React 写 data-user-id={uid} 渲染后属性消失 —— 因为 JSX 默认只透传标准 HTML 属性。
安全写法：
- Vue：用
v-bind:[`data-${key}`]="value"或直接写死属性名（确保全小写+短横线） - React：用
attributes={{ 'data-user-id': uid }}或通过ref+setAttribute手动挂载 - 属性名必须是 kebab-case，
data-userId或data_user_id都会被浏览器忽略 - 值含中文或符号时，HTML 中建议用双引号包裹，CSS 选择器也必须对应加引号
最常被忽略的一点：data-* 是纯标记，不是响应式数据管道。它触发样式更新靠的是选择器匹配和浏览器的样式重计算机制，而不是“监听”——所以别指望它像 Vue 的响应式数据那样自动联动，该预设的变量、该写的分支选择器，一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
