概述
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
, orpc
<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> }。 |
浏览器支持
特性 | 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) | 未实现 | ? | ? |