css的attr属性

在CSS中，attr()函数用于从元素的HTML属性中检索值，并将其插入到样式属性中。以下是一些使用attr()函数的示例及其解释：

基本用法

1. 内容伪元素中的用法：

   <div data-label="Example Label">Hello World</div>
   

   div::after {
       content: attr(data-label);
       color: blue;
   }
   

   以上代码将会在<div>元素后面添加一个包含data-label属性值的内容，即Example Label。

兼容性与限制

attr()函数的功能目前主要用于content属性，用于生成伪元素内容。虽然CSS属性值插入的想法是存在的，但尚未广泛实现。因此，它在实际应用中有一定的局限性。

总结

• attr()主要用于在伪元素的content属性中插入HTML属性值。
• 不能直接用于其他CSS属性（如width、height等）。
• 未来的CSS规范可能会扩展attr()的使用范围，但目前受到限制。

参考文档：developer.mozilla.org/zh-CN/docs/…