attr()

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

示例

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

浏览器支持


IE8以上版本的浏览器都支持`attr()`函数

语法：

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>`	<integer>。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。	`0`，或该属性允许的最小值（如果0是不合法的值）。
`number`还处于实验阶段	`<number>`	<number>。若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。前缀与后缀空格将被截掉。	`0`，或该属性允许的最小值（如果0是不合法的值）。
`length`还处于实验阶段	是用于表示距离尺寸的 CSS 数据类型。`<length>`	是用于表示距离尺寸的 CSS 数据类型。`<length>`，带单位，比如`12.5em`。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。若属性值是一个相对长度，`attr()`会将其计算为绝对长度。前缀与后缀空格将被截掉。	`0`，或该属性允许的最小值（如果0是不合法的值）。
`em`,`ex`,`px`,`rem`,`vw`,`vh`,`vmin`,`vmax`,`mm`,`cm`,`in`,`pt`, or `pc`还处于实验阶段	是用于表示距离尺寸的 CSS 数据类型。`<length>`	`<number>`，不带单位，如`12.5`，并被解释为带有所规定单位的是用于表示距离尺寸的 CSS 数据类型。`<length>`值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。若属性值是一个相对长度，`attr()`会将其计算为绝对长度。前缀与后缀空格将被截掉。	`0`，或该属性允许的最小值（如果0是不合法的值）。
`angle`还处于实验阶段	`<angle>`	`<angle>`，带单位，如`30.5deg`。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0deg`，或该属性允许的最小值（如果0deg是不合法的值）。
`deg`,`grad`,`rad`还处于实验阶段	`<angle>`	`<number>`，不带单位，如`12.5`)，并被解释为带有所规定单位的`<angle>`值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0deg`，或该属性允许的最小值（如果0deg是不合法的值）。
`time`还处于实验阶段	code><time>	code><time>，带单位，如`30.5ms`。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0s`，或该属性允许的最小值（如果0s是不合法的值）。
`s`,`ms`还处于实验阶段	code><time>	code><time>，不带单位，如`30.5`，并被解释为带有所规定单位的 code><time>值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0s`，或该属性允许的最小值（如果0s是不合法的值）。
`frequency`还处于实验阶段	`<frequency>`	`<frequency>`，带单位，如`12.5kHz`)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0Hz`，或该属性允许的最小值（如果0Hz是不合法的值）。
`Hz`,`kHz`还处于实验阶段	`<frequency>`	`<frequency>`，不带单位，如`12.5`)，并被解释为带有所规定单位的`<frequency>`值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。前缀与后缀空格将被截掉。	`0Hz`，或该属性允许的最小值（如果0Hz是不合法的值）。
`%`还处于实验阶段	表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。`<percentage>`	`<number>`，不带单位，如`12.5`)，并被解释为带有所规定单位的表述一个百分比值。许多 CSS 属性可以取百分比值，经常用以根据父对象来确定大小。`<percentage>`值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。若属性值用作长度，`attr()`将其计算为绝对长度。前缀与后缀空格将被截掉。	`0%`，或该属性允许的最小值（如果0%是不合法的值）。

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

实例

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8"/>
<style>
div:after{
	content:attr(title);
}
</style>
</head>
<body>
<div ></div>
</body>
</html>

效果图：