attr

语法

/* 简单用法 */
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>定义的默认值（见上表）。

示例

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

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

结果

hello world

示例 1

HTML

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

CSS

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

Result

示例 2

HTML

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

CSS

.background {
  height: 100vh;
}

.background {
  background-color: red;
}

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

规范

浏览器兼容性

参见

• Attribute selectors
• HTML data-* attributes
• SVG data-* attributes