MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

概述

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

规范

规范 状态 备注
CSS Values and Units Module Level 3
attr()
Candidate Recommendation 增加两个可选参数;且可以用于所有属性;且可以返回除<string>之外的其他类型。这些改变是实验性质的 ,且如果浏览器支持不足,可能在CR阶段被丢弃。
CSS Level 2 (Revision 1)
attr()
Recommendation 限制用在 content 属性;且必须返回<string>}。

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 2.0 1.0 (1.7 or earlier) 9 9.0 3.1
用于 content之外的属性,与返回非字符串值 未实现 未实现 (参见 bug 435426) 未实现 ? ?
特性 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 2.1 1.0 (1.0) 8 10.0 3.1
用于 content之外的属性,与返回非字符串值 ? 未实现 (see bug 435426) 未实现 ? ?

 

文档标签和贡献者

 此页面的贡献者: mrstork, prayash, duXing, cuixiping, teoli, Jimmie_Felidae
 最后编辑者: mrstork,