不能。CSS无数据绑定机制，data-属性与CSS变量无法自动关联，需JS通过setProperty()等方法手动同步更新。
data属性和CSS变量能直接绑定吗？
不能。CSS本身没有数据绑定机制，data-属性只是HTML自定义属性，浏览器不会自动把它和--my-var变量关联起来。你写的div[data-status="loading"] { --state-color: #ff9800; }看起来像“绑定”，其实只是利用属性选择器触发样式规则，变量赋值仍需手动写死——变量值不会随data-status动态更新。
怎么让data属性变化时CSS变量跟着变？
靠纯CSS做不到，必须配合JS更新style属性或:root。常见做法是：
- dataset读取data-值，转成合法CSS变量名
- 用element.style.setProperty()写入对应变量
- 或批量更新document.documentElement.style
比如：el.dataset.theme === "dark"时，执行el.style.setProperty('--bg', '#121212')
注意：不要用setAttribute('style', ...)覆盖整个style字符串，会清掉其他内联样式
属性选择器匹配data值要注意什么？
容易踩的坑全在这儿：
- data-id="123"和data-id="0123"是两个不同值，字符串严格匹配
- 空格敏感：data-tags="a b c"不等于[data-tags~="a"]（后者用~匹配空格分隔的单词），但[data-tags="a b c"]必须完全相等
- 布尔型data属性如data-loading没值时，[data-loading]能匹配，但[data-loading="true"]匹配不到
- 大小写：HTML中data-MyAttr在JS里是el.dataset.myattr，CSS选择器必须用小写[data-myattr]为什么不用CSS变量+属性选择器做状态管理？
性能和可维护性都差：
- 每个可能的data-值都要手写一条CSS规则，data-status有5种值就得写5组[data-status="x"] { --status-bg: ... }
- 无法处理计算逻辑，比如data-opacity="0.75"没法自动转成opacity: 0.75，还得靠JS解析字符串
- 浏览器不监听data-变化，DOM改了但CSS不会重算变量作用域
真要动态控制，优先走JS设style或用CSS.registerProperty()（目前仅Chrome/Edge支持，且需开启实验标志）
style属性或:root。常见做法是：
- dataset读取data-值，转成合法CSS变量名
- 用element.style.setProperty()写入对应变量
- 或批量更新document.documentElement.style
比如：el.dataset.theme === "dark"时，执行el.style.setProperty('--bg', '#121212')
注意：不要用setAttribute('style', ...)覆盖整个style字符串，会清掉其他内联样式
属性选择器匹配data值要注意什么？
容易踩的坑全在这儿：
- data-id="123"和data-id="0123"是两个不同值，字符串严格匹配
- 空格敏感：data-tags="a b c"不等于[data-tags~="a"]（后者用~匹配空格分隔的单词），但[data-tags="a b c"]必须完全相等
- 布尔型data属性如data-loading没值时，[data-loading]能匹配，但[data-loading="true"]匹配不到
- 大小写：HTML中data-MyAttr在JS里是el.dataset.myattr，CSS选择器必须用小写[data-myattr]为什么不用CSS变量+属性选择器做状态管理？
性能和可维护性都差：
- 每个可能的data-值都要手写一条CSS规则，data-status有5种值就得写5组[data-status="x"] { --status-bg: ... }
- 无法处理计算逻辑，比如data-opacity="0.75"没法自动转成opacity: 0.75，还得靠JS解析字符串
- 浏览器不监听data-变化，DOM改了但CSS不会重算变量作用域
真要动态控制，优先走JS设style或用CSS.registerProperty()（目前仅Chrome/Edge支持，且需开启实验标志）
data-值都要手写一条CSS规则，data-status有5种值就得写5组[data-status="x"] { --status-bg: ... }
- 无法处理计算逻辑，比如data-opacity="0.75"没法自动转成opacity: 0.75，还得靠JS解析字符串
- 浏览器不监听data-变化，DOM改了但CSS不会重算变量作用域
真要动态控制，优先走JS设style或用CSS.registerProperty()（目前仅Chrome/Edge支持，且需开启实验标志）
CSS变量的动态源头只能是JS写入的style或:root，data-属性只是个中间信标——它不发光，只反光。
