data-** 使用数据属性

数据属性：在 HTML5 中以 data- 开头的为数据属性，数据属性用来存储没有可视化展示的额外信息

...     

获取数据属性：可以使用 dataset 读取到数据

var article = document.querySelector('#electriccars');

article.dataset.columns// "3"

article.dataset.indexNumber// "12314"

article.dataset.parent// "cars"

每个属性都是可读写的字符串

data 为 attr 属性，css可以获取到

article::before{

   content:attr( data-** )

}

可以通过css属性选择器改变css样式

article[ data-columns = 3 ]{

    width : 400px;

}

article[ data-colimns = 4 ]{

    width : 500px;

}

https://segmentfault.com/a/1190000003711146

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes