CSS attr() 表达式

CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

attr() 表达式可以用于任何 CSS 属性。

语法

/* 简单用法 */
attr(data-count);
attr(title);

/* 带类型 */
attr(src url);
attr(data-count number);
attr(data-width px);

/* 带回退值 */
attr(data-count number, 0);
attr(src url, "");
attr(data-width px, inherit);
attr(data-something, "default");

示例

p:before {
  content: attr(data-foo) " ";
}

<p data-foo="hello">world</p>

<input><button ml="6">按钮</button>

[ml] { margin-left: attr(ml px, 0); }

输入框和按钮之间就有6px的间隙了，截图效果如下所示：

<a href="https://image.zhangxinxu.com/image/study/s/hanyun.jpg">图片？</a>
<style>
[href$="jpg"]::before { 
  content: ''; 
  display: block; 
  width: 256px; height: 192px; 
  background: image-set(attr(href)); 
  background-size: cover;
}
</style>

在支持的浏览器下面，就会有如下图所示的效果:

Tailwind CSS 和UnoCSS 的发展和浏览器的支持问题，让attr()多少有些显的鸡肋了，但了解一下原生，对我们总有帮助的。
css 这些年也在不断的发展，但我感觉我已经跟不上了，新特性写出来的代码，我已经不认识了。css 特性纷繁复杂，零碎又没有逻辑。不去特意关注，根本不会了解，就算特意去了解过，长时间不用又忘记了。现代前端工程化的发展，各种UI框架可以让我们不去写复杂的css，也就很少去关注css新特性的发展了。

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr
https://www.zhangxinxu.com/wordpress/2025/05/css-attr-function/