CSS函数 attr 获取选择到的元素的某一HTML属性值

255 阅读1分钟

概述

  • 用来获取选择到的元素的某一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属性,其他的属性和高级特性目前是实验性的

兼容性

参考文档

其他文档