data- 属性在css中严格按html原始写法匹配，js的dataset自动驼峰转换，二者需对齐；动态插入元素时必须同步设置data-属性，否则样式不触发；css无法跨元素响应data-*值，attr()仅限伪元素content使用。
直接用 [data-foo] 或 [data-foo="bar"] 就能生效，但样式“不更新”或“不匹配”基本都是拼写、作用域或时机问题，不是 CSS 不支持。
data-* 属性名在 CSS 和 JS 中大小写规则不一致
CSS 选择器严格按 HTML 中原始写法匹配，JS 的 dataset 会自动做驼峰转换，两者必须对齐。
- HTML 写
data-user-id="123"→ CSS 必须用[data-user-id="123"]，[data-userId]或[data-UserId]全无效 - JS 里读写要用
el.dataset.userId，写成el.dataset.userid或el.dataset.UserID都拿不到值 - 所有
data-属性值默认小写，避免混用Dark和dark导致匹配失败
动态插入元素时 data-* 必须同步设置
CSS 不会“等待”属性补上，只在元素挂载时做一次快照匹配。先插入再设属性，样式就永远不会触发。
- 错误写法：
el.innerHTML = '<div class="item">text</div>'→ 没data-，[data-type="card"]规则完全不触发 - 正确写法：先创建，再设属性：
const div = document.createElement('div'); div.dataset.type = 'card'; div.textContent = 'text'; parent.append(div); - 若用模板字符串，务必写全：
el.innerHTML = '<div data-type="card" class="item">text</div>'
想跨元素联动响应同一 data-* 值？纯 CSS 做不了
CSS 的 :hover 或属性选择器只能影响当前元素及其后代，无法广播状态。比如 hover 一列想高亮所有同 data-index="2" 的单元格，必须靠 JS。
- 监听事件：
table.addEventListener('mouseover', e => { if (e.target.matches('td')) { const idx = e.target.dataset.index; } }) - 批量选中：
document.querySelectorAll(`td[data-index="${idx}"]`) - 加类而非改
dataset：统一加col-hover类，样式写在.col-hover上更稳定
attr() 只能在伪元素的 content 里用，别指望它驱动颜色或动画
attr(data-color) 在 background、color 等非 content 属性里不被支持，也不会触发重绘。
- 能用：
span::after { content: attr(data-tooltip); } - 不能用：
div { background: attr(data-bg); }—— 浏览器忽略，且无任何报错 - 想用
data-控制主题色，必须配合:root+ 选择器层级覆盖，例如html[data-theme="dark"] { --bg: #121212; }
最容易被忽略的是：data-* 本身没有响应性，CSS 不监听变化；所谓“自动更新”，只是浏览器在属性变更后重新计算样式树——前提是属性确实变了，而不是被设为空字符串或拼错名字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
