Rel与CSS的联合使用
作者：张经纬 来源：张经纬的博客 发布时间：2010-02-20 13:03:00
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
.c,.b {background:url(01.png) right center no-repeat;} .b {background-image:url(02.png);}
<ul><li><a href="#" rel="civil" class="c">小李</a></li><li><a href="#" rel="party" class="b">局长</a></li></ul>
现在，我们可以利用REL属性以及属性选择器来完成这个工作。
a[rel~="civil"]{background:url(01.png) right center no-repeat;}a[rel~="party"]{background:url(02.png) right center no-repeat;}
同时，我们的HTML结构也可以剔除那些多余的样式了。
<ul><li><a href="#" rel="civil">小李</a></li><li><a href="#" rel="party">局长</a></li></ul>
另外:ie6不支持属性选择器，但我们可以用JS来修复这个问题。
0
投稿猜你喜欢
- Oracle数据库以其高可靠性、安全性、可兼容性，得到越来越多的企业的青睐。如何使Oracle数据库保持优良性能，这是许多数据库管理员关心的
- 在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用索引来加快数据处理速度也成为广大数据库用户所
- IE在处理透明度上真够恶心，而且在IE7必须让元素的hasLayout为ture，要不会失效。以下是我最新处理透明度的代码：var
很多年前，我们就可以轻易的从很多国营商场、火车车厢、饭馆旅馆中看到墙上挂的那个小本本-意见薄，作为经营方与顾客沟通的- 一、读者指引 读者指引帮助你掌握本文的梗概。以免你看了大半才明白这编文章不适合你，给你造成视觉污染。如果你正在用ASP+XML写一些程序，或
- 本人最近在当当网上购买了一本关于用户体验的书，在此把最实在的内容整理下发给大家分享下。第一步：表现层视觉设计，也就是我们说的网页设计师做的工
- 同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月My
- 随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在
- 用DIV+CSS可以作出很多不同形状的角形；以下我只写了几个；CSS没有优化；是为了让大家看得更清一些；以下是一些小三角的形状：这是第一个小
- ASP 内建对象Active Server Pages 提供内建对象，这些对象使用户更容易收集通过浏览器请求发送的信息、响应浏览器以及存储用
- 来自Usability Post的Categories vs Tags作者认为“就博客而言，标签没有太大意义。”I don’t think
- 最近自己很关注文档的撰写，包括如何制作PPT。因为发现自己在表达想法和观点的时候，从自己的语言到文字都异常的欠缺。常常需要“高人”帮忙翻译。
- 代码和说明如下：<％Const ForReading = 1 &nbs
- 或许现在关心交互设计的设计师们大部分来自于了互联网行业，所以我们看到当你搜索“交互设计”时更多的BLOG和文章是在谈论互联网，网站的导航，注
- 农业银行总行1998年以来正式推广了新版网络版综合业务统计信息系统，该系统是基于WindowsNT4.0平台，采用客户/服务器模式，以Mic
- 我们在制作网页时，有时会遇到这样的情况：根据用户的选择，显示不同的内容。比如，制作一个登录网页，上面有
- aspImage是ServerObjects站点上非常好的一个组件，它可以使我们利用Asp实现很多对于图形的处理功能,他的功能强大,如果你需
- 下载并选择MySQL的安装包由于MySQL一直在升级，所以当您阅读本文时，或许在其官方网站上已提供了新的正式版供你下载，因此，以下提供的链接
- Mr.Think是一个喜欢简洁的人,喜欢如诗一样的代码.不喜欢.NET的代码,就是因为经常看到同事用VS后生成出来的一段段冗长的代码.在我的
- 1.我在一行结束后按回车键，就跳到隔一行的段落上，如何避免隔行跳到下一段落? A.在一行结束后先按着[Shift]键，再按回车就可以不隔行跳
