attr - CSS（层叠样式表） 编辑

概述

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

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

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

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

用法

语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

解释

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

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

参见

• Attribute selectors

• HTML data-* attributes

• SVG data-* attributes