说实话,rel在我眼里除了link CSS的时候用过,其他时候我还真没用过。根本不知道REL是用来干嘛 的。看了这篇文章才知道原来Rel还可以这么用。
原文是
Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。
早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用 CSS属性选择器以及REL来做一些有意思的功能。
这是一段带有REL属性的HTML结构。
- <ul>
- <li><a href="#" rel="civil">小李</a></li>
- <li><a href="#" rel="party">局长</a></li>
- </ul>
页面中他呈现这个样子
因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。
过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS
- <style>
- .c,.b {background:url(01.png) right center no-repeat;}
- .b {background-image:url(02.png);}
- </style>
- <ul>
- <li><a href="#" rel="civil" class="c">小李</a></li>
- <li><a href="#" rel="party" class="b">局长</a></li>
- </ul>
- a[rel~="civil"]{background:url(01.png) rightright center no-repeat;}
- a[rel~="party"]{background:url(02.png) rightright center no-repeat;}
- <ul>
- <li><a href="#" rel="civil">小李</a></li>
- <li><a href="#" rel="party">局长</a></li>
- </ul>
--EOF--
最后一句话实在让人寒心,不过总算也可以这样的做了,再过一两年,还有IE6的存在吗?IE6的时间够长了吧?好象从02年开始到现在,都经历了8年左右的时间了,居然还没有被消亡。习惯这东西真害人。。。。
原文地址为:rel与CSS的联合使用,不过其实我更喜欢第二幅图后面的小图标