CSS attr 学习小结

[OhCoder]

CSS 中的 attr 属于 Functional Notations ，使用方式类似于编程语言中的方法调用。

在 CSS2.1 中，attr 表达式总是返回字符串。但是在 CSS3 中，attr 表达式可以返回多种类型的数值。虽然说是多种类型，但并不是包含所有类型。

通常情况下，attr 表达式的使用格式为：

attr(<attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

类型	描述
attr-name	一个有效的 CSS 名称。
type-or-unit	与名称对应的类型或单位。当未指定此参数，则统一按‘string’处理。
attr-fallback	备用数值。当缺少称或无法解析指定的CSS名称时，会设置此数值。如果未设置此参数，返回值将会根据参数类型进行推断，返回该类型对应的默认数值。

在 CSS3 中，attr 的返回值根据类型划分如下：

类型	描述
string	字符串类型。默认为空字符串。注意：此步骤并不会再次通过CSS解析器重新解析。例如：如果属性值为”\51”，那么结果就会是包含三个字符的字符串，而不会解析成“Q”。
color	颜色类型。默认值为：currentcolor
integer	整型。默认值为0或任何其他有效的最小值。
number	数值类型。默认值为0或任何其他有效的最小值。
length, angle, time, frequency	根据不同类型，解析成对应的数值。默认值为0或任何其他有效的最小值。
%	可匹配 length，angle，time或frequency类型的关键字。

举个例子

<div class="attr-test" data-test="world">
  hello
</div>

.attr-test:after {
  content: attr(data-test);
}

参考资料

• Functional Notations
• CSS 中其他 Functional Notations
• CSS3 中 attr 的兼容性