可行，但仅限于::before/::after的content属性，且只返回原样字符串；attr()不支持css自定义属性、不能用于color等其他属性，属性名须严格匹配（如data-price对应attr(price)），不加引号，无fallback机制。
attr() 在伪元素中读取 data-* 属性是否可行？
可以，但仅限于 content 属性，且只返回字符串——attr() 在 CSS 中**只能用于 ::before 和 ::after 的 content 值中**，其他属性（如 color、width）使用会直接失效，浏览器忽略该声明。
为什么写 attr(data-price) 却显示 “attr(data-price)” 文本？
这是最常见的误用：忘记加引号或写错属性名。CSS 中 attr() 的参数必须是纯属性名（不带 data- 前缀），且**不能加引号**；同时 HTML 元素必须真实存在该 data- 属性。
-
attr(price)✅ 对应data-price="199" -
attr(data-price)❌ 浏览器找不到名为data-price的属性（它实际叫price） -
attr("price")❌ 引号会让 CSS 解析为字面量字符串，不是属性读取 -
content: attr(price) "元";✅ 可拼接普通字符串
data 属性值含空格、中文或单位时怎么处理？
attr() 原样输出属性值，不做任何转义或类型转换。这意味着：
- HTML 中写
data-desc="超轻·2024款"→ CSS 里attr(desc)输出就是超轻·2024款，无需额外编码 - 若值含换行或制表符，也会原样渲染（可能破坏布局），建议服务端/JS 预处理为单行
- 数值类（如
data-weight="2.5kg"）无法直接参与计算，attr()不支持单位提取或数字运算 - 空值（
data-tag=""）会输出空字符串，不会 fallback，也没法用attr(tag, "N/A")这种语法（CSS 尚未支持 fallback）
兼容性和替代方案要注意什么？
现代浏览器（Chrome 110+、Firefox 115+、Safari 16.4+）已稳定支持 attr() 用于 content，但旧版本 Safari（≤16.3）和部分安卓 WebView 仍不支持，表现为伪元素完全不显示。
- 降级方案：用 JS 动态写入文本内容，或用
data-+:not([data-desc])::after做简单存在性判断 - 不要试图用
attr()替代 JS 数据绑定——它不可交互、不可响应、不触发重排 - 若需样式依赖 data 值（比如根据
data-status="error"改颜色），请用属性选择器：[data-status="error"] { color: red; }，而非attr()
真正要用 attr() 的场景其实很窄：纯静态文案注入，且你确认目标环境支持。一旦涉及逻辑、fallback 或样式联动，就该切回 JS 或属性选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
