CSS attr() 函数（快速上手）

什么是 CSS attr() 函数？一个被低估的实用工具

在 CSS 的众多函数中，attr() 可能是最容易被忽视的一个。它不像 transform 或 transition 那样常用于动画，也不像 grid 或 flex 那样频繁出现在布局设计中。但如果你在开发中遇到需要动态读取 HTML 属性值的场景，attr() 函数会成为你的得力助手。

简单来说，attr() 函数的作用是：从 HTML 元素中读取指定的属性值，并将其作为 CSS 的值使用。它就像一个“属性翻译器”，把 HTML 中写的内容，直接“搬”到样式里。

举个例子：

<a href="https://example.com" title="点击访问官网">访问官网</a>

a {
  /* 使用 attr() 读取 title 属性的值 */
  content: attr(title);
  font-size: 14px;
  color: #007acc;
}

这段代码会让链接的文字变成 点击访问官网，但前提是你要配合 content 属性使用。这说明 attr() 本身并不能直接改变元素的显示内容，它需要和其他 CSS 属性配合。

为什么说 attr() 函数是“智能的”？

想象一下，你有一个内容管理系统（CMS），需要为多个链接添加提示信息。如果每个链接的提示都写死在 CSS 里，后期维护起来会非常麻烦。而使用 attr()，你只需要在 HTML 中写 title="xxx"，CSS 就能自动读取并应用。

这就像一个“自动填充”的表单——你填好数据，系统自动识别并使用，无需手动复制粘贴。

常见应用场景

• 动态显示 title、alt、data-* 等自定义属性的值
• 为图标或按钮添加提示文本（通过 ::before 或 ::after）
• 实现基于属性的样式控制，比如根据 data-status 显示不同颜色

attr() 函数的基本语法与参数解析

attr() 的语法非常简洁：

attr(属性名, 类型, 默认值)

• 属性名：要读取的 HTML 属性，比如 title、href、data-role。
• 类型：可选参数，用来指定返回值的类型。常见类型有：
  • string：返回字符串（默认）
  • url：返回 URL 类型，会自动加引号
  • color：返回颜色值，支持 #fff、red 等
  • length：返回长度值，如 10px、2em
  • number：返回数字（不带单位）
  • integer：返回整数
• 默认值：当属性不存在时，返回的默认值。

示例：带默认值的 attr()

<div data-tooltip="这是提示信息">鼠标悬停查看</div>
<div data-tooltip="">空提示</div>
<div>没有 data-tooltip 属性</div>

div {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  margin-right: 10px;
}

/* 使用 attr() 读取 data-tooltip，没有则显示“暂无提示” */
div::after {
  content: attr(data-tooltip "暂无提示");
  /* 如果 data-tooltip 不存在，返回 "暂无提示" */
  position: absolute;
  top: -30px;
  left: 0;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

div:hover::after {
  opacity: 1;
}

在这个例子中，attr(data-tooltip "暂无提示") 表示：如果 data-tooltip 存在，就用它的值；如果不存在或为空，就用 "暂无提示"。

实战案例：用 attr() 实现动态图标提示

假设你有一个图标系统，每个图标都通过 data-icon 属性定义其含义，比如 data-icon="search"、data-icon="user"。

我们想让每个图标在鼠标悬停时，显示对应的文字提示。

<span class="icon" data-icon="search">🔍</span>
<span class="icon" data-icon="user">👤</span>
<span class="icon" data-icon="settings">⚙️</span>

.icon {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 0 10px;
  position: relative;
}

/* 通过 attr() 读取 data-icon 的值作为提示文本 */
.icon::after {
  content: attr(data-icon);
  /* 设置为字符串类型，确保正确显示 */
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* 只在悬停时显示 */
}

.icon:hover::after {
  opacity: 1;
}

这里的关键是 content: attr(data-icon)，它让每个图标自动读取自己的 data-icon 值，并显示出来。不需要为每个图标单独写 CSS，完全实现“数据驱动样式”。

注意事项与常见陷阱

虽然 attr() 很强大，但有几个坑要特别注意：

1. attr() 必须配合 content 使用

attr() 本身不能直接修改元素内容。你只能在 ::before、::after、content 属性中使用它。

错误用法：

/* ❌ 错误：attr() 不能直接用于 background */
div {
  background: attr(data-color); /* 无效 */
}

正确用法：

/* ✅ 正确：配合 content 使用 */
div::before {
  content: attr(data-color);
  display: block;
  font-size: 14px;
}

2. 类型参数要选对，否则样式失效

如果你写了一个颜色属性，但没指定 color 类型，浏览器会把它当字符串处理。

div {
  color: attr(data-color color); /* ✅ 正确：指定类型为 color */
}

div {
  color: attr(data-color); /* ❌ 可能无效，除非值是合法颜色字符串 */
}

3. 默认值必须是字符串或合法值

/* ✅ 正确 */
content: attr(data-tip "默认提示");

/* ❌ 错误 */
content: attr(data-tip 123); /* 数字不能作为默认值 */

默认值必须是字符串、URL、颜色等合法类型，不能是任意数据。

更高级用法：结合自定义属性与变量

attr() 可以和 CSS 变量结合使用，实现更灵活的动态样式。

<div data-bg="blue" data-text="white" data-font-size="16px">
  这是一段动态样式的文字
</div>

div {
  /* 从属性中读取值，赋给 CSS 变量 */
  --bg-color: attr(data-bg color);
  --text-color: attr(data-text color);
  --font-size: attr(data-font-size length);
  
  /* 使用变量 */
  background-color: var(--bg-color, #fff);
  color: var(--text-color, #000);
  font-size: var(--font-size, 14px);
  padding: 16px;
  border-radius: 8px;
  margin: 10px 0;
}

这个例子展示了 attr() 如何成为“数据与样式之间的桥梁”。你可以在 HTML 中配置样式，CSS 自动读取并应用。

总结：为什么你应该掌握 CSS attr() 函数？

attr() 函数虽然不常被提及，但它的价值在于将数据与样式解耦。它让你的 HTML 更具语义，让 CSS 更具智能。

• 当你需要动态读取属性值时，attr() 是最直接的方式
• 它特别适合构建可复用的 UI 组件，比如提示框、标签、图标等
• 它能减少重复 CSS 代码，提升开发效率
• 它是实现“数据驱动样式”的核心技术之一

附录：常见属性与类型对照表

结语

CSS attr() 函数就像一个隐藏的“魔法钥匙”，它能打开 HTML 与 CSS 之间那道无形的墙。当你在项目中遇到“需要根据属性值动态改变样式”的需求时，别忘了这个强大的工具。

它不是万能的，但当你真正用起来，会发现它在某些场景下，比 JavaScript 还来得简洁高效。学会它，你离“真正理解 CSS”又近了一步。