attr()仅限伪元素content属性使用，用于显示data-*等支持的HTML属性值，不参与计算、不触发响应式更新，不可用于color等其他CSS属性。
attr() 函数只能在 content 属性中使用
想用 attr() 把自定义属性（比如 data-price）的值显示在页面上，必须配合伪元素 ::before 或 ::after，且仅限于 content 属性。直接写在 color、width 或普通文本内容里是无效的。
常见错误现象：div { color: attr(data-color); } 完全不生效，浏览器忽略该声明；或者控制台没报错但视觉毫无变化——这是语法合法但不被支持的典型表现。
-
attr()是 CSS 的纯展示函数，不能参与计算（比如calc(attr(data-width) + 10px)不行） - 只接受字符串类型值；如果 HTML 中写的是
data-count="42"，CSS 里拿到的就是字符串"42"，不是数字 - 不触发重排或重绘以外的副作用，也无法监听变化——属性改了，伪元素内容不会自动更新（实际会，但仅限于属性变更被浏览器检测到时；不过不要依赖它做响应式逻辑）
正确写法：data-* 属性 + ::before + content: attr()
HTML 中用标准的 data- 前缀定义属性，CSS 中通过 attr(属性名) 提取，并绑定到 ::before 的 content 上。
示例：
立即学习“前端免费学习笔记（深入）”；
html <span data-unit="kg" data-price="29.99">商品</span>
css
span::before {
content: "¥" attr(data-price) " / " attr(data-unit);
margin-right: 8px;
opacity: 0.8;
}
渲染结果为：¥29.99 / kg 商品。注意两点：
-
attr()的参数是属性名本身（如data-price），不带引号，也不加attr("data-price") - 多个
attr()可以和字符串字面量拼接，用空格或符号分隔，但不能用+连接 - 若属性不存在，
attr(data-missing)返回空字符串，不会报错也不会显示undefined
attr() 不支持非 data-* 属性（除少数例外）
虽然规范允许 attr(任意属性名)，但目前所有主流浏览器（Chrome/Firefox/Safari）**只支持 data-* 类自定义属性**，以及原生 HTML 属性如 title、alt、href 等。试图读取 my-id 或 x-label 这类非标准、无前缀的属性，结果一律为空。
常见踩坑点：
-
<div my-price="19.99"></div>→content: attr(my-price)在 Chrome 中返回空，不是"19.99" -
<img src="b.jpg">→attr(src)能取到b.jpg，但attr(data-src)才是你存的原始值 - 大小写敏感：
data-Price和data-price是两个不同属性，CSS 中必须完全一致
需要动态/可交互展示？attr() 不是首选
如果目标是让属性值参与样式计算（比如根据 data-level 控制背景色）、响应用户操作（点击后更新显示）、或兼容旧浏览器，attr() 就力不从心了。
替代方案更可靠：
- 用 JavaScript 读取
element.dataset.price，再写入textContent或innerHTML - CSS 自定义属性（
--price: 29.99）+var(--price)，但注意它不能直接读取 HTML 属性，需 JS 同步赋值 - 服务端渲染或模板引擎直接输出，避免运行时依赖
attr() 的定位很窄：只在伪元素里做静态、只读、轻量的文案补充。别指望它替代 JS 数据绑定，也别在关键路径上用它承载业务逻辑。
