attr() 是 CSS 中的一个函数，用于获取 HTML 元素的属性值并在样式中使用。虽然功能强大，但它的应用有一些限制和注意事项。
基本语法
element::pseudo-element {
property: attr(attribute-name);
}可用场景
1. 在伪元素的 content 属性中使用（最常用）
<div data-tooltip="这是提示文本">悬停查看提示</div>div::after {
content: attr(data-tooltip);
display: none;
/* 其他样式 */
}
div:hover::after {
display: block;
}2. 支持的属性（有限）
目前主流浏览器仅正式支持在 content 属性中使用 attr()，其他属性的支持有限：
/* 这些在大多数浏览器中无效 */
div {
background-color: attr(data-bg-color);
width: attr(data-width px);
}类型转换和单位
attr() 可以结合类型关键字使用：
/* 语法（但浏览器支持有限） */
attr(attribute-name <type-or-unit>? , <fallback>?)div {
width: attr(data-width px, 100px); /* 如果data-width不存在，回退到100px */
}实际应用示例
工具提示(Tooltip)
<button data-tooltip="点击提交表单">提交</button>button::after {
content: attr(data-tooltip);
position: absolute;
/* 其他定位和样式 */
}自定义列表标记
<ul>
<li data-icon="✓">项目一</li>
<li data-icon="★">项目二</li>
</ul>li::before {
content: attr(data-icon);
margin-right: 8px;
}浏览器兼容性
-
所有现代浏览器都支持在
content属性中使用attr() -
其他属性中的使用仍处于实验阶段（CSS3规范中定义但未广泛实现）
-
类型转换和回退值支持有限
注意事项
-
不能用于所有属性：目前只有
content属性得到广泛支持 -
动态更新：当HTML属性值改变时，CSS会自动更新
-
性能：过度使用可能影响渲染性能
-
可访问性：屏幕阅读器可能无法读取通过
attr()生成的内容
未来可能性
CSS Values and Units Level 5 规范计划扩展 attr() 的功能，可能包括：
-
支持更多属性
-
更好的类型转换
-
更灵活的回退机制
目前如需更灵活的属性驱动样式，建议使用CSS变量或JavaScript。
