attr()

attr() CSS函数用于检索所选择的元素的属性值，并且在样式表中使用它。它也可以用于伪元素，在这种情况下，它返回的是该伪元素的源元素上的属性值。

/* Simple usage */
attr(data-count
attr(title

/* With type */
attr(src url
attr(data-count number
attr(data-width px

/* With fallback */
attr(data-count number, 0
attr(src url, ''
attr(data-width px, inherit
attr(data-something, 'default'

注意：该attr()函数可以用于任何CSS属性，但仅支持除了实验性content以外的属性。

语法

可能值

attribute-name——是CSS中引用的HTML元素的属性名称。

Keyword	Associated type	Comment	Default value
string	<string>	The attribute value is treated as a CSS <string>. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.	An empty string.
color	<color>	The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS <string> value. Leading and trailing spaces are stripped.	currentColor
url	<url>	The attribute value is parsed as a string that is used inside a CSS url()function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped.	The url about:invalid that points to a non-existent document with a generic error condition.
integer	<integer>	The attribute value is parsed as a CSS <integer>. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0, or, if 0 is not a valid value for the property, the property's minimum value.
number	<number>	The attribute value is parsed as a CSS <number>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0, or, if 0 is not a valid value for the property, the property's minimum value.
length	<length>	The attribute value is parsed as a CSS <length> dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped.	0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc	<length>	The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, attr()computes it to an absolute length. Leading and trailing spaces are stripped.	0, or, if 0 is not a valid value for the property, the property's minimum value.
angle	<angle>	The attribute value is parsed as a CSS <angle> dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad	<angle>	The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an <angle> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time	<time>	The attribute value is parsed as a CSS <time> dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms	<time>	The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as an<time> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency	<frequency>	The attribute value is parsed as a CSS <frequency> dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.	0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz	<frequency>	The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <frequency> with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.	0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
%	<percentage>	The attribute value is parsed as a CSS <number>, that is without the unit (e.g. 12.5), and interpreted as a <percentage>. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, attr()computes it to an absolute length. Leading and trailing spaces are stripped.	0%, or, if 0% is not a valid value for the property, the property's minimum value.

<fallback>——如果关联属性丢失或包含无效值，则使用该值。回退值（fallback）必须在attr()使用的地方有效，即使它未被使用，也不得包含其他attr()表达式。如果attr()不是属性的唯一组件值，则其<fallback>值必须是由<type-or-unit>所定义的类型。如果没有设置，CSS将使用为每个<type-or-unit>定义的默认值。

形式语法

attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )where 
<type-or-unit> = string | integer | color | url | integer | number | length | angle | time | frequency | em | ex | px | rem | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | deg | grad | rad | ms | s | Hz | kHz | %

实例

HTML

<p data-foo="hello">world</p>

CSS

p::before {
  content: attr(data-foo) " ";
}

结果

规范

Specification	Status	Comment
CSS Values and Units Module Level 3The definition of 'attr()' in that specification.	Candidate Recommendation	Added two optional parameters; can be used on all properties; may return other values 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)The definition of 'attr()' in that specification.	Recommendation	Limited to the content property; always return a <string>.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	2.0	(Yes)	1.0 (1.7 or earlier)	8	9.0	3.1
Usage in other properties than content and with non-string values	No support2	No support	No support 1	No support	No support	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.1	(Yes)	1.0 (1.0)	8	10.0	3.1
Usage in other properties than contentand with non-string values	?	No support	No support 1	No support	?	?