不能。attr()仅在content属性中有效，返回字符串且不触发样式计算，对color、opacity等属性无效；css变量需js通过setproperty()或预设选择器手动同步。
attr() 不能把 data- 值自动转成 CSS 变量值，也不能触发变量计算——它只负责把属性字符串原样塞进 content，对 background-color、opacity 这类属性完全无效。
为什么 attr(data-status) 不能当 CSS 变量用
attr() 是个纯字符串提取函数，只在 content 属性里合法（比如 ::before 或 ::after），浏览器明确禁止它用于颜色、尺寸、过渡等样式计算场景。写 color: attr(data-color); 不会报错，但实际被忽略——DevTools 里会标为“invalid value”。它和 var(--color) 完全不同层：前者是 CSS 伪内容机制，后者是运行时变量求值机制。
-
attr(data-opacity)→ 返回字符串"0.75"，但opacity: attr(data-opacity)不生效 -
attr(data-bg)→ 返回"#ff0"，但background-color: attr(data-bg)被静默丢弃 - 想让
data-影响样式，必须走 JS 设置style.setProperty()或提前写死[data-bg="red"] { --bg: red; }
[data-status] 选择器 + var(--x) 的真实协作方式
所谓“协同”，其实是两步分离动作：先靠属性选择器匹配元素，再靠该元素上已存在的 CSS 变量（或内联 style）提供值。CSS 本身不读取 data- 内容去赋值变量，只是借它当开关。
-
[data-status="loading"] { --state: "loading"; }—— 这句只是声明变量，不是“绑定”；data-status改了，--state不会自动更新 - 要让
div[data-status="success"]显示绿色背景，得配一条：[data-status="success"] { background-color: #4caf50; }，或更灵活地：[data-status="success"] { --status-bg: #4caf50; }，然后在通用规则里用background-color: var(--status-bg, transparent); - 变量作用域取决于声明位置：写在
:root下全局有效，写在[data-x]里只对该匹配元素及其后代生效
JS 必须介入的三个典型场景
凡涉及“动态响应 data- 变化”，都绕不开 JS。浏览器不监听 dataset 变更，DOM 改了，CSS 规则不会重算。
- 从
data-opacity="0.8"解析出数字并设element.style.opacity—— 字符串需parseFloat()处理 - 根据
data-theme="dark"批量更新document.documentElement.style，如setProperty('--bg', '#1e1e1e') - 监听
MutationObserver捕获data-属性变更，再触发样式刷新（比如切换is-active类 + 同步变量）
容易被忽略的大小写与空格陷阱
data- 属性名在 HTML 中写 data-MyId，JS 里是 el.dataset.myid，CSS 选择器必须写 [data-myid] —— 浏览器强制小写归一化，大小写不匹配就查不到。
-
data-tags="a b c"和[data-tags~="a"]匹配（~表示空格分隔单词），但[data-tags="a"]不匹配 -
data-loading无值时，[data-loading]能命中，[data-loading="true"]则不能 -
data-id="001"和data-id="1"是两个完全不同值，字符串严格相等匹配
真正关键的不是怎么“联动”，而是认清边界：data- 是信标，var() 是颜料，attr() 只是贴纸——三者各司其职，硬拉它们手牵手，只会掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
