这些属性称为数据属性，是格式为data-* 用于将更多信息附加到html元素。

此处的链接提供了有关如何使用它们的良好示例：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

示例：

<div id=\'el\' data-my-attr=\'attr_value\'></div>

JavaScript:

大多数情况下，JavaScript使用这些信息来获取数据并进行相应的处理。

document.getElementById(\'el\').dataset.myAttr; //Notice the property name uses CamelCase to replace the \'-\'s.

//Or using either of jQuery methods:
$(\'#el\').data(\'myAttr\');
$(\'#el\').attr(\'data-my-attr);

CSS:

/* Use as selector */
div[data-my-attr=\'attr_value\']{
    /* styles */
}

显然，您还可以使用attr（）获取其值：

#el::before{
  content: attr(\'data-my-attr\');
}

所以我想这其中的一个用途是生成动态html，然后在CSS样式中使用attr（）设置CSS属性。