我们可以使用data-作为前缀来设置我们所需要的自定义数据属性。
使用此属性可以存放一些我们所需要的数据，代码如下:
| 1 | < a href ="javascript:" data-url ="softwhy.com" data-webname ="蚂蚁部落" >蚂蚁部落</a > |
上面代码中，以data-为前缀就是自定义数据属性，属性值就是存放的数据。
浏览器兼容:
（1）.IE8和IE8以上浏览器支持此属性。
（2）.谷歌浏览器支持此属性。
（3）.火狐浏览器支持此属性。
（4）.opera浏览器支持此属性。
（5）.safria浏览器支持此属性。
命名规则:
（1）.数据属性要以data-开头。
（2）.属性名中的字符都是小写，并且在前缀 "data-" 之后必须有至少一个字符。
（3）.属性值可以是任意字符串。
可以利用自定义属性进行css匹配和相关javascript操作。
使用自定义属性作为选择器代码如下:
<!doctype html>
<
html>
<
head>
<
meta charset
="utf-8"
>
<
meta name
="author" content
="http://www.softwhy.com/" />
<
title>蚂蚁部落</
title>
<
style type
="text/css"
>
a {
display:block;
width:100px;
height:50px;
margin:10px;
text-align:center;
line-height:50px;
background:#ccc;
}
a[data-webname="蚂蚁部落"] {
color:red;
}
</
style>
</
head>
<
body>
<
a href
="javascript:" data-webname
="蚂蚁部落"
>蚂蚁部落</a
>
<
a href
="javascript:" data-webname
="antzone"
>softwhy.com</a
>
</
body>
</
html>
上面的代码就可以利用自定义属性进行匹配，设置元素的样式。
原文发布时间为：2017-3-2
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
