CSS attr() 函数详解

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规范中定义但未广泛实现）

• 类型转换和回退值支持有限

注意事项

1. 不能用于所有属性 ：目前只有 content 属性得到广泛支持

2. 动态更新：当HTML属性值改变时，CSS会自动更新

3. 性能：过度使用可能影响渲染性能

4. 可访问性 ：屏幕阅读器可能无法读取通过 attr() 生成的内容

未来可能性

CSS Values and Units Level 5 规范计划扩展 attr() 的功能，可能包括：

• 支持更多属性

• 更好的类型转换

• 更灵活的回退机制

目前如需更灵活的属性驱动样式，建议使用CSS变量或JavaScript。