概述
- 用来获取选择到的元素的某一HTML属性值,并用于其样式
- 它也可以用于伪元素,属性值采用伪元素所依附的元素
用法
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
attribute-name是CSS所引用的HTML属性名称<type-or-unit>表示所引用的属性值的单位 如果该单位相对于所引用的属性值不合法,那么attr()表达式也不合法 若省略,则默认值为string<fallback>如果HTML元素缺少所规定的属性值或属性值不合法, 则使用fallback值
示例
p:before {
content:attr(data-foo) " ";
}
<p data-foo="hello">world</p>
结果显示: hello world
小结
attr有时候会很好用, 但兼容性不是特别好, 使用前最好先看一下兼容性- 因为他只能在
content上使用, 有些特殊的场景可能可以考虑使用 var() attr()理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的content属性,其他的属性和高级特性目前是实验性的