attr()仅在content属性中有效，不能用于css变量赋值；其值无法导出到--my-var中，必须用javascript提取data-*属性并调用setproperty()写入变量。
attr() 不能在 CSS 变量赋值中使用
因为 attr() 函数本身**只在 content 属性中被规范支持**，其他 CSS 属性（包括 --my-var 这类自定义属性）里写 attr(data-color) 是无效的，浏览器直接忽略，不会报错，但也不会生效。
常见错误现象：div { --bg: attr(data-bg); background: var(--bg); } 看起来逻辑通顺，实际 --bg 的值是空字符串或初始值，background 回退到默认（通常是透明）。
-
attr()不是“通用取值函数”，它属于伪元素生成内容的专用机制 - CSS 自定义属性（CSS 变量）的值必须是**静态可解析的 CSS 值**，或来自
var()、calc()等有限函数，attr()不在白名单内 - 即使配合
:before/:after也无用——attr()只能在content里触发，无法“导出”到变量中
想动态读取 HTML 属性并影响样式，该怎么做
必须借助 JavaScript 手动提取属性、设置 CSS 变量。这是目前唯一可靠路径。
典型场景：根据 data-theme="dark" 切换整页主题色，或按 data-size="large" 调整组件尺寸。
- 用
element.getAttribute('data-size')拿值，再用element.style.setProperty('--size', value)写入变量 - 注意：如果目标是根元素变量，用
document.documentElement.style.setProperty() - 监听属性变化需搭配
MutationObserver，单纯靠 class 切换或属性修改不会自动触发重计算 - 避免高频调用
setAttribute+ JS 同步 setProperty，可能引发 layout thrashing
示例：
const el = document.querySelector('[data-color]');
el.style.setProperty('--fg-color', el.getAttribute('data-color') || '#333');
为什么不用 data-* 属性 + CSS 选择器模拟
可以，但有明显限制：它依赖预设的、有限的属性值集合，无法处理任意字符串或运行时计算值。
比如 [data-color="red"] { --fg: #f00; } 是合法的，但以下情况它就失效：
-
data-color值来自用户输入或 API 返回（如"#2a9d8f"），你不可能提前写出所有可能的选择器 - 需要把颜色转成 HSL 后微调亮度（
calc()无法嵌套attr()） - 多个属性联动（
data-color和data-contrast共同决定一个变量）
这种方案适合静态主题开关类场景，不适合真正动态的数据驱动样式。
attr() 在 content 里能做什么（仅作对比）
这是 attr() 唯一能稳定工作的上下文，常用于辅助信息展示或调试。
-
::before { content: attr(data-label); }—— 把data-label="Submit"渲染为伪元素文本 -
content: attr(title) " (" attr(data-version) ")";—— 支持多段拼接（但仅限content） - 注意：
attr()返回的是字符串，不自动转类型；attr(data-opacity)得到的是"0.8"字符串，不能直接用于opacity属性
别指望它能“穿透”进变量体系——CSS 的计算层和生成层是隔离的，这是设计使然，不是 bug。
真正动态绑定 HTML 属性与 CSS 变量，JS 是绕不开的一环；漏掉这步，光靠 CSS 就会卡死在空变量上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
