html5-自定义元素属性data-和content的attr用法

<h2 class="h" data-zj="jy">我是自定义的属性</h2>
h2[data-zj="jy"]{
    color:#FFFF33;}
    
h2[data-zj="jy"]:hover:after{
    content:attr(data-zj);
}

1.data-是自定义属性的写法,后面接你的属性名字如:zj。

2.h2[data-zj="jy"]通过CSS3的属性选择器来定义样式。

3.结合:hover:after这两个伪类:让鼠标悬停在元素上面的时候,在其后面显示出自定义的属性值 :ontent:attr(data-zj);

posted @ 2012-05-16 14:07  o0Luffy0o  阅读(6381)  评论(0编辑  收藏  举报