attr()

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

示例

a:after{content:"("attr(href)")"; font-size: 12px;}

浏览器支持

语法：

取值

• attribute-name：是CSS所引用的HTML属性名称。
• 表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括：

  关键字	类型	备注	默认值
  string		属性值将被解析为	空字符串
  color还处于实验阶段		属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS 值。 前缀与后缀空格将被截掉。	当前颜色
  url还处于实验阶段		属性值将被解析为可用于url()函数的字符串。 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。 前缀与后缀空格将被截掉。	URL about:invalid，表示资源不存在。
  integer还处于实验阶段		。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。	0，或该属性允许的最小值（如果0是不合法的值）。
  number还处于实验阶段		。若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。	0，或该属性允许的最小值（如果0是不合法的值）。
  length还处于实验阶段	是用于表示距离尺寸的 CSS 数据类型。	是用于表示距离尺寸的 CSS 数据类型。，带单位，比如12.5em。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。 若属性值是一个相对长度，attr()会将其计算为绝对长度。 前缀与后缀空格将被截掉。	0，或该属性允许的最小值（如果0是不合法的值）。
  em,ex,px,rem,vw,vh,vmin,vmax,mm,cm,in,pt, or pc还处于实验阶段	是用于表示距离尺寸的 CSS 数据类型。	，不带单位，如12.5，并被解释为带有所规定单位的是用于表示距离尺寸的 CSS 数据类型。值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。 若属性值是一个相对长度，attr()会将其计算为绝对长度。 前缀与后缀空格将被截掉。	0，或该属性允许的最小值（如果0是不合法的值）。
  angle还处于实验阶段		，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0deg，或该属性允许的最小值（如果0deg是不合法的值）。
  deg,grad,rad还处于实验阶段		，不带单位，如12.5)，并被解释为带有所规定单位的值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0deg，或该属性允许的最小值（如果0deg是不合法的值）。
  time还处于实验阶段	code>	code>，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0s，或该属性允许的最小值（如果0s是不合法的值）。
  s,ms还处于实验阶段	code>	code>，不带单位，如30.5，并被解释为带有所规定单位的 code>值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0s，或该属性允许的最小值（如果0s是不合法的值）。
  frequency还处于实验阶段		，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
  Hz,kHz还处于实验阶段		，不带单位，如12.5)，并被解释为带有所规定单位的值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。 前缀与后缀空格将被截掉。	0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
  %还处于实验阶段	表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。	，不带单位，如12.5)，并被解释为带有所规定单位的表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。 若属性值用作长度，attr()将其计算为绝对长度。 前缀与后缀空格将被截掉。	0%，或该属性允许的最小值（如果0%是不合法的值）。

• ：如果HTML元素缺少所规定的属性值或属性值不合法，则使用值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其值必须为所指定的类型，否则CSS会使用相应定义的默认值（见上表）。

实例

div:after{
	content:attr(title);
} 

效果图：

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com