attr()在伪元素中仅返回字符串，不能自动转为数字、颜色等类型，仅合法用于content属性，无法驱动样式计算。
伪元素里用 attr() 只能返回字符串，别指望它自动转成数字或颜色
直接说结论：attr() 在 ::before 或 ::after 中只能作为字符串值使用，CSS 不会解析它为长度、颜色、角度等类型。比如你写 content: attr(data-size px);，浏览器不会把 data-size="16" 变成 16px —— 它只会原样输出 "16 px"（注意空格），这通常不是你想要的。
常见错误现象：content: attr(data-color); 配合 color: attr(data-color); 报错，因为 color 属性不接受 attr()；attr() 仅合法用于 content，且只在伪元素中生效。
-
attr()必须配合content属性，其他 CSS 属性（如width、background-color）不支持 - HTML 自定义属性值必须是纯字符串，
attr(data-width)返回的是"200"，不是200px - 若需单位，得手动拼接：例如
content: attr(data-width) "px";，但注意引号间有空格 → 输出是"200 px"，不是"200px" - CSS 不支持表达式或类型转换，无法写
attr(data-opacity number)这类语法（尽管旧草案提过，但未被实现）
data- 属性名和 attr() 参数要严格一致，大小写敏感
HTML 中的 data-MyId 和 CSS 里的 attr(data-myid) 不匹配。浏览器按 ASCII 码逐字符比对，MyId ≠ myid ≠ MYID。
使用场景：你想用自定义属性控制多个元素的提示文案，又不想重复写 content: "编辑";。
- HTML 写
<button data-tip="删除"></button>，CSS 就必须用attr(data-tip) - 避免驼峰或大写字母，统一用短横线分隔：
data-action-type→attr(data-action-type) - 属性值含空格、引号、反斜杠时，会被原样输出，不转义也不解析 ——
data-tip="他说："点我""会完整显示为他说："点我"
想动态控制样式？attr() 不行，该用 CSS 自定义属性 + var()
如果你的真实目标是“根据 HTML 属性切换背景色、字号等”，attr() 是走不通的。它只服务 content 文本内容，不能驱动样式计算。
正确路径是：用 data- 属性做标记，再用属性选择器配合 CSS 自定义属性：
button[data-theme="dark"] {
--bg: #333;
--text: #fff;
}
button {
background-color: var(--bg, #fff);
color: var(--text, #333);
}
这样既保持语义清晰，又能真正影响布局和渲染。而 attr() 唯一不可替代的用途，是把数据“印出来”——比如调试用的 data-debug-id 显示在元素右上角。
- 不要试图用
attr()替代var()，它们定位完全不同 - 属性选择器（
[data-xxx]）性能良好，现代浏览器优化充分，放心用 - 若需 JS 动态更新样式，优先改
style.setProperty()或切 class，而非反复操作dataset再指望 CSS 自动响应
IE 和旧版 Safari 对 attr() 的支持非常有限
IE 完全不支持 attr()（包括 IE11）；Safari 直到 12.1 才开始支持非空字符串返回，早期版本可能返回空值或报解析错误。
这意味着：如果项目需要兼容 IE 或 iOS 12 以下设备，所有依赖 attr() 的 content 都应视为降级失效内容 —— 你得确保主信息不依赖它。
- 可用
@supports (content: attr(data-x))做特性检测，但注意它不能区分 Safari 12.0 和 12.1 - 更稳妥的做法是：关键文案仍写在 HTML 内，
attr()只用于辅助信息（如版本号、状态标签） - 构建时若用 PostCSS，没有插件能“模拟”
attr()行为，因为它本质是运行时求值
attr() 就能驱动样式，结果发现它连单位都要你手动拼、还不能参与计算。真要动态样式，就得换思路 —— 标记用 data-，驱动靠 var() 和属性选择器，展示用 attr()。三者各司其职，别硬塞。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
