<p>attr() 仅能在伪元素的 content 属性中作为字符串使用，无法直接赋值给 CSS 自定义属性或参与样式计算；需通过 JavaScript 安全读取 data-* 属性并写入 style 或 :root 变量。</p>
attr() 不能直接和 CSS 变量一起用
这是最常被误解的一点：attr() 的返回值无法直接赋给 --my-var 这类自定义属性，也不能在 var(--my-var) 中“动态注入” DOM 属性值。CSS 规范明确限制 attr() 只能在 content 属性中作为字符串使用（且仅限伪元素），其他地方如 color、width 或 background 中使用会直接失效或退为初始值。
想让 data-* 值影响样式，得靠 JavaScript 中转
CSS 本身没有运行时计算能力，所以必须由 JS 读取 data- 属性，再写入对应元素的 style 属性或全局 :root 变量。常见做法：
- 用
element.dataset.xxx读取data-color="red"这类值 - 用
element.style.setProperty('--bg-color', value)写入 CSS 变量 - 若需批量生效，可统一挂到
:root上，再用var(--bg-color)在任意选择器中引用 - 注意：变量名需合法（不能含连字符开头、不能是纯数字等），建议统一用
data-css-xxx命名并做白名单校验
示例片段：
const el = document.querySelector('[data-css-bg]');
el.style.setProperty('--bg-from-data', el.dataset.cssBg || 'transparent');伪元素里用 attr() + content 是唯一纯 CSS 方案
如果目标只是在 ::before/::after 中显示 DOM 属性内容，attr() 可以直接用，但仅限 content，且返回值始终是字符串：
立即学习“前端免费学习笔记（深入）”；
-
content: attr(data-label);→ 显示data-label="Submit"的值 -
content: attr(data-priority number);不生效 ——number和url类型在多数浏览器中仍不被支持 - 不能把
attr(data-size)当成12px去设置font-size，浏览器不会解析单位 - 空值或缺失属性会渲染为空字符串，不是
unset或initial
data-* 到样式的映射要防 XSS 和类型错配
用户可控的 data- 属性一旦进样式，就可能成为注入入口。比如 data-color="red; background: url(javascript:alert(1))" 会破坏样式甚至触发执行（虽然现代浏览器已拦截 javascript: URL，但仍属高危）：
- JS 中提取后务必过滤/白名单处理（例如只允许
red、#fff、rgb(0,0,0)等格式） - 数值类（如
data-opacity）应parseFloat()并 clamp 在 0–1 范围 - 避免将原始
attr()结果拼进style字符串（如el.style.cssText += 'color: ' + rawAttr） - 服务端渲染时，若预设了
style="--color: {{ data.color }}"，也要同步做转义
真正可靠的路径从来不是“用 CSS 把 data-* 变成变量”，而是“用 JS 安全地桥接二者”。浏览器没打算让 attr() 成为样式引擎的输入口，硬绕只会掉坑里。
