21cn.com

  当前位置:21CN首页 > IT频道 > 软件频道 > 正文  
 
教你用CSS属性选择器控制链接样式
2008-09-24 18:04:54  IT168  【 浏览字号: 点击发表评论
精彩回顾 手机 | 数码 | 笔记本 | 家电 | 下载
·诺基亚触摸屏S60第五版5800初接触 ·谷歌金山词霸 V1.8 最新版QQ2008下载
·08超值家用DC新品盘点 “免费”杀毒软件下载 ·佳能5DMark2第3方样片 史上最强网络黑客盘点
·令你匪夷所思的手机新技术 笔记本采购防骗指南 ·五款极速液晶电视推荐 玩转鼠标拖放操作
标签: CSS

    有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接。我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开。我们可能会这样做:

.external
{
   background:url(images/external.gif) no-repeat right top;
  padding-right:12px;
}

    然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐。

    那有没有好的办法来实现呢?有。可以利用CSS3中的属性选择,但是在IE6及以下版本不支持该方法,在FireFox中已经实现了。

a[href^="http://www.it168.com"]
{
background-image:none;
padding-right:0px;
}

    会查找所有以http://www.blueidea.com开头的链接,并且排除背景图片。有了上面的属性,就好办了。

<style type="text/css">
a
{
background:url(external.gif) no-repeat right top;
padding-right:14px;
font-size:12px;
}
a[href^="http://www.it168.com"]
{
background-image:none;
padding-right:0px;
}
</style>


    给所有链接加上图标,然后去掉以http://www.it168.com开头的链接图标,这样就实现了外部链接显示图标,内部链接不显示图标了。

(编辑:充姬娅)
相关新闻: CSS 搜索其他
- 教你用CSS属性选择器控制链接样式  2008-09-24 18:00:44
- CSS Alpha透明代码相关知识学习  2008-09-23 11:51:30
- CSS技巧 Alpha透明相关知识的学习  2008-09-18 17:01:55
下一篇:教你用CSS属性选择器控制链接样式
热门电影排行
火舞艳阳
智人
马拉松
飞跃情海 | 雷霆悍匪 | 绝不放过你 | 杀人曲
| 法本无情 | 左轮右你 | 警局奇案 | 我最棒
 点播更多    

热门剧集排行
新不了情
功勋
特区大亨
铁血莲花 | 王保长歪传 | 天使在线 | 红色档案
凭什么爱你 | 欢乐家庭 | 大姐 | 冲出绝境
 点播更多    
 
 
公司简介  |  广告服务  |  网站导航  |  合作伙伴  |  诚征代理  |  联系我们