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

规范

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

浏览器支持

• Desktop 
• Mobile

特性	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本支持	2.0	1.0 (1.7 or earlier)	8	9.0	3.1
用于 content之外的属性，与返回非字符串值	Not supported	Not supported (参见 bug 435426)	Not supported	?	?