CSS 的 var() 和 attr() 区别

CSS 的 var() 和 attr() 区别

var() 和 attr() 都是 CSS 中的函数，但它们的功能、用途和工作原理有本质区别：

1. var() - CSS 变量函数

功能：用于引用CSS 自定义属性（也称为 CSS 变量）。

特点：

• 专门处理以 -- 开头的 CSS 自定义属性
• 语法：var(--variable-name, [fallback-value])
• 在 CSS 样式表内部使用，不直接读取 HTML 属性
• 支持所有现代浏览器，是 CSS 变量系统的核心部分

示例：

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  /* 如果 --primary-color 未定义，则使用 fallback 值 */
  border-color: var(--border-color, #ccc);
}

2. attr() - HTML 属性获取函数

功能：获取HTML 元素的属性值并在 CSS 中使用。

特点：

• 读取 HTML 元素的实际属性值（如 title、data-* 等）
• 语法：attr(attribute-name [, type] [, fallback-value])
• 主要设计用于 content 属性，在其他 CSS 属性中的支持非常有限
• 浏览器对非 content 属性的支持不一致（许多浏览器仅在 content 中完全支持）

示例：

/* 主要用途：在伪元素中显示 HTML 属性值 */
a[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  /* 其他样式 */
}

/* 理论上可以尝试用于其他属性，但实际支持有限 */
div {
  /* 以下用法在大多数浏览器中不被支持 */
  width: attr(data-width px, 100px);
}

核心区别总结

特性	var()	attr()
作用对象	CSS 自定义属性（--variable）	HTML 元素属性（如 title、data-*）
主要用途	实现 CSS 变量系统	在 CSS 中引用 HTML 属性值
典型使用场景	主题颜色、间距等设计系统变量	伪元素中显示属性值（主要是 content）
浏览器支持	所有现代浏览器广泛支持	非 content 属性支持有限
回退机制	支持指定备用值	支持指定备用值

重要提示

• var() 是现代 CSS 设计系统（如主题切换）的核心工具
• attr() 在除 content 以外的 CSS 属性中使用时，大多数浏览器不支持，不应依赖它实现关键功能
• 两者解决的是完全不同的问题：var() 处理 CSS 内部的变量管理，attr() 尝试连接 HTML 属性与 CSS（但功能受限）

简而言之：var() 用于 CSS 变量，attr() 主要用于在 content 中显示 HTML 属性值，不要将它们混淆使用。