attr

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

备注： attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的

译者注：如果发现浏览器兼容表里 attr() 的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

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

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

语法

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");

解释

attribute-name

是 CSS 所引用的 HTML 属性名称。

<type-or-unit>

表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括：

关键字 类型 备注 默认值
string <string> 属性值将被解析为 <string> 空字符串
color <color> 属性值将被解析为#xxx、#xxxxxx 或关键字的形式，且必须为合法 CSS <string> 值。前缀与后缀空格将被截掉。 当前颜色
url <uri> 属性值将被解析为可用于url()函数的字符串。相对 URL 是根据 HTML 文档的路径解析，而不是样式文件所在的路径。前缀与后缀空格将被截掉。 URL about:invalid，表示资源不存在。
integer <integer> 属性值将被解析为 CSS <integer>。若不是合法值（不是整数或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 0，或该属性允许的最小值（如果 0 是不合法的值）。
number <number> 属性值将被解析为 CSS <number>。若不是合法值（不是数字或超出 CSS 属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。 0，或该属性允许的最小值（如果 0 是不合法的值）。
length <length> 属性值将被解析为 CSS <length>，带单位，比如 12.5em。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。 0，或该属性允许的最小值（如果 0 是不合法的值）。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> 属性值将被解析为 CSS <number>，不带单位，如 12.5，并被解释为带有所规定单位的 <length> 值。若不是合法值（不是长度值或超出 CSS 属性规定的范围），则使用默认值。若属性值是一个相对长度， attr()会将其计算为绝对长度。前缀与后缀空格将被截掉。 0，或该属性允许的最小值（如果 0 是不合法的值）。
angle <angle> 属性值将被解析为 CSS <angle>，带单位，如30.5deg。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0deg，或该属性允许的最小值（如果 0deg 是不合法的值）。
deg, grad, rad <angle> 属性值将被解析为 CSS <number>，不带单位，如12.5)，并被解释为带有所规定单位的 <angle> 值。若不是合法值（不是角度值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0deg，或该属性允许的最小值（如果 0deg 是不合法的值）。
time <time> 属性值将被解析为 CSS <time>，带单位，如30.5ms。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0s，或该属性允许的最小值（如果 0s 是不合法的值）。
s, ms <time> 属性值将被解析为 CSS <time>，不带单位，如30.5，并被解释为带有所规定单位的 <time> 值。若不是合法值（不是时间值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0s，或该属性允许的最小值（如果 0s 是不合法的值）。
frequency <frequency> 属性值将被解析为 CSS <frequency>，带单位，如12.5kHz)。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0Hz，或该属性允许的最小值（如果 0Hz 是不合法的值）。
Hz, kHz <frequency> 属性值将被解析为 CSS <frequency>，不带单位，如12.5)，并被解释为带有所规定单位的<frequency>值。若不是合法值（不是频率值或超出 CSS 属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。 0Hz，或该属性允许的最小值（如果 0Hz 是不合法的值）。
% <percentage> 属性值将被解析为 CSS <number>，不带单位，如12.5)，并被解释为带有所规定单位的 <percentage>值。若不是合法值（不是数字或超出 CSS 属性规定的范围），则使用默认值。若属性值用作长度，attr()将其计算为绝对长度。前缀与后缀空格将被截掉。 0%，或该属性允许的最小值（如果 0% 是不合法的值）。
<fallback>

如果 HTML 元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在 CSS 属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则 CSS 会使用相应<type-or-unit>定义的默认值（见上表）。

示例

css
p:before {
  content: attr(data-foo) " ";
}
html
<p data-foo="hello">world</p>

结果

hello world

示例 1

HTML

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

CSS

css
[data-foo]::before {
  content: attr(data-foo) " ";
}

Result

示例 2

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

HTML

html
<div class="background" data-background="lime">
  颜色应该是红色而不是绿色因为浏览器并不支持 attr() 的高级用法
</div>

CSS

css
.background {
  height: 100vh;
}
css
.background {
  background-color: red;
}

.background[data-background] {
  background-color: attr(data-background color, red);
}

规范

Specification
CSS Values and Units Module Level 5
# attr-notation

浏览器兼容性

BCD tables only load in the browser

参见