attr()仅在::before或::after伪元素的content属性中有效，且必须配合data-*属性使用；它不响应dataset修改，只监听attribute变更，返回值恒为字符串，无fallback机制。
attr()只能用在::before或::after的content里
直接写.box { content: attr(data-label); }完全无效，浏览器会静默忽略。必须绑定到伪元素上，否则连空内容都不会渲染。
常见错误是漏掉伪元素选择器，或者误以为content能作用于普通元素。它只对::before和::after生效，且默认是display: inline——如果父容器设了overflow: hidden或伪元素没设position，也可能“显示了但看不见”。
-
button::after { content: attr(data-tooltip); }✅ -
button { content: attr(data-tooltip); }❌（无效） -
button::after { content: attr(data-tooltip); display: block; }→ 更可控，尤其要控制宽高或换行时
data-*属性是唯一推荐的输入源
用attr(title)或attr(id)虽能工作，但风险明显：title可能被辅助工具劫持，id或class含空格、点号、斜杠时，输出会混乱甚至破坏布局；style或onclick里的引号、分号更会导致content截断或解析失败。
- ✅ 推荐：
<span data-status="draft">草稿</span>+span::after { content: attr(data-status); } - ❌ 避免：
<div class="btn primary"></div>+div::after { content: attr(class); }（输出"btn primary"，通常不是你想要的） - 属性名必须全小写+短横线，
data-user-id可以，dataUserId或data_user_id不规范，部分旧环境可能不识别
attr()不监听JS修改，setAttribute才是关键
写el.dataset.status = 'done'后，attr(data-status)大概率不会更新——这不是bug，而是规范行为。CSS不追踪DOM property变更，只响应attribute层面的变化。
- ✅ 正确更新：
el.setAttribute('data-status', 'done')（触发重绘，多数情况下能刷新伪元素） - ❌ 无效更新：
el.dataset.status = 'done'（改的是JS对象属性，不触发型attribute变更） - 即使用了
setAttribute()，若父元素有will-change: contents或正在执行GPU动画，也可能延迟1帧甚至更久才显示新值 - 缺失属性时返回空字符串，不是
undefined，也没fallback机制。想实现“无值则显示‘未设置’”，必须用JS补位
content里空格、换行、类型全是字符串
attr()拿回来的永远是字符串，哪怕HTML里写的是data-count="42"，CSS里拿到的就是"42"，不能直接参与calc()计算；content还会压缩连续空白符，data-label=" hello world "会被显示成"hello world"。
- 需要保留格式？用
\a（换行符）+white-space: pre：content: "line1\a line2"; white-space: pre; - 想拼接文字？CSS做不到，
content: "Status: " attr(data-status)合法，但content: attr(data-status) " completed"也合法，只是所有空格都被压缩 - 数值类用途（如
width、font-size）别指望attr()，它不支持类型转换，也不被允许用在非content属性中
content: attr(...)，而是判断什么时候该用它、什么时候该交给JS——比如需要响应式更新、 fallback、格式化或计算，attr()就只是个轻量展示层，越想让它干更多事，越容易掉坑里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
