attr

概述

注意:  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);
}

规范

Specification Status Comment
No changes.
CSS Values and Units Module Level 3
attr()
Candidate Recommendation

Added two optional parameters;
can be used on all properties;
may return values other than <string>.

These changes are experimental and may be dropped during the CR phase if browser support is too small.
CSS Level 2 (Revision 1)
attr()
Recommendation Limited to the content property;
always returns a <string>.
规范 状态 备注
CSS Values and Units Module Level 4
attr()
Editor's Draft 无变化
CSS Values and Units Module Level 3
attr()
Candidate Recommendation 增加两个可选参数;且可以用于所有属性;且可以返回除<string>之外的其他类型。这些改变是实验性质的 ,且如果浏览器支持不足,可能在CR阶段被丢弃。
CSS Level 2 (Revision 1)
attr()
Recommendation 限制用在 content 属性;且必须返回<string>}。

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
attr()Chrome Full support 2Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support Yes
<fallback>
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
<type-or-unit>
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

参见