纯css无法让data-属性驱动css变量实时变化，必须通过js修改document.documentelement的data-theme并配合css选择器响应，attr()不能用于动态读取data-值，变量需被var()显式调用才生效。

纯 CSS 无法让 data- 属性“驱动” CSS 变量实时变化，所谓“神奇用法”其实是把 data- 当作状态信标，靠 JS 主动写入变量值——CSS 只负责响应，不负责监听。

为什么[data-theme]选择器不能自动更新--color变量

CSS 属性选择器匹配的是 DOM 状态快照，不是响应式监听器。你写 [data-theme="dark"] { --bg: #121212; }，这只在元素拥有该属性时生效；但如果你用 JS 改了 data-theme 值，CSS 变量不会自动重算——因为 --bg 是在规则块里“静态赋值”的，不是从属性值动态读取的。

• attr(data-theme) 只能在 content 属性中用，且不能用于 var() 或其他样式声明
• 浏览器不把 data- 当作 CSS 变量源，它只是个 HTML 属性，和 id 或 class 一样，只触发选择器匹配
• 所有看似“绑定”的效果，背后都有 JS 在调用 element.style.setProperty() 或 document.documentElement.style.setProperty()

data-theme必须设在document.documentElement上才有效

因为 :root 对应的就是 html 元素，所有全局 CSS 变量都从这里继承。如果把 data-theme="dark" 写在 或某个 <div> 上，<code>[data-theme="dark"] 选择器能匹配到，但定义在 :root 里的变量根本不会被覆盖——作用域断了。

• 错误写法：document.body.setAttribute('data-theme', 'dark') → :root 没变，变量不变
• 正确写法：document.documentElement.setAttribute('data-theme', 'dark')
• 服务端渲染时，直接在 标签上写死，避免 FOUC

用dataset读取data-值时命名必须全小写+连字符

HTML 解析器对 data- 属性名极其严格：只认小写字母、数字、连字符（-），其余一律忽略。JS 的 dataset API 会自动把连字符转成驼峰，但前提是 HTML 里写对了。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• ✅ 正确：<div data-user-id="123"> → <code>el.dataset.userId 可读
• ❌ 无效：<div data-userid="123"> 或 <code><div data_user_id="123"> → <code>el.dataset.userId 返回 undefined
• 数字开头要加引号：<div data-2024-report="done"> → 必须用 <code>el.dataset["2024Report"] 访问
• 值永远是字符串：el.dataset.count === "5"，不是数字 5，别直接拿它做数值比较

过渡动画要加在使用var()的属性上，而不是变量本身

CSS 变量没有过渡能力，transition: --bg 0.3s 是无效语法。真正需要过渡的是那些引用变量的属性，比如 background-color、color、border-color。

• ✅ 正确：body { background-color: var(--bg); transition: background-color 0.3s ease; }
• ❌ 无效：:root { transition: --bg 0.3s; } → 浏览器直接忽略
• 多个属性要显式列出：transition: background-color 0.3s, color 0.3s, border-color 0.3s;
• 伪元素（::before、::after）和 fixed 元素也得单独加 transition，否则切主题时会突变

最易被忽略的一点：CSS 变量必须被 var() 显式调用才起作用。定义了 --text-color 却没在任何地方写 color: var(--text-color)，等于白写；尤其容易漏掉 svg fill、box-shadow、border 这些非基础属性。