css3中选择器为不同链接追加不同图标

原创 2011年01月20日 15:47:00

以前在美化网页时,经常会为不同的链接追加不同的图标,以示区别明确告诉用户这是个什么样的链接,更直接。传统的作法是定义不同的class,然后追加到每个链接上,但是现在有了css3强大的属性选择器(IE7及以上版本都支持),就解放了我们命名的阻碍,也对html的结构尺寸减少了不少。

效果:


素材:


网页代码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
			    margin: 5px;
			}
			a{
			    text-decoration: none;
			    padding-right: 20px;
			    background-image: url(a.png);
			    background-position: right top;
			    background-repeat: no-repeat;
			}
			a[href^="http://"]{
			    background-position-y: -409px;
			}
			a[href^='mailto:']{
                background-position-y: -354px;
            }
			a[href='home']{
			    background-position-y: -382px;
			}
			a[href='#']{
                background-position-y: -329px;
            }
			a[href$='.doc']{
			    background-position-y: 0;
			}
			a[href$='.ppt']{
                background-position-y: -50px;
            }
            a[href$='.xls'],a[href$='.xlsx']{
                background-position-y: -75px;
            }
            a[href$='.html']{
                background-position-y: -100px;
            }
            a[href$='.pdf']{
                background-position-y: -125px;
            }
            a[href$='.jpg'],a[href$='.gif'],a[href$='.png']{
                background-position-y: -172px;
            }
            a[href$='.swf']{
                background-position-y: -193px;
            }
            a[href$='.zip'],a[href$='.rar']{
                background-position-y: -217px;
            }
            a[href$='.mp3']{
                background-position-y: -245px;
            }
            a[href$='.exe']{
                background-position-y: -273px;
            }
            a[href$='.txt']{
                background-position-y: -300px;
            }
		</style>
	</head>
	<body>
	    <ul>
	    	<li><a href="http://blog.csdn.net/pvfhv">博客</a></li>
	    	<li><a href="home">首页</a></li>
            <li><a href="a.doc">word文档</a></li>
            <li><a href="b.ppt">powerpoint文档</a></li>
            <li><a href="c.xls">excel文档</a></li>
            <li><a href="c.xls">excel2014版本文档</a></li>
            <li><a href="d.html">html文档</a></li>
            <li><a href="e.pdf">pdf文档</a></li>
            <li><a href="f.jpg">jpg图片文档</a></li>
            <li><a href="f.gif">gif图片文档</a></li>
            <li><a href="f.png">png图片文档</a></li>
            <li><a href="g.swf">flash文档</a></li>
            <li><a href="h.zip">zip压缩文档</a></li>
            <li><a href="h.rar">rar压缩文档</a></li>
            <li><a href="j.mp3">mp3文档</a></li>
            <li><a href="h.exe">exe安装文件</a></li>
            <li><a href="a.txt">txt文本文档</a></li>
            <li><a href="mailto:abc@gmail.com">abc@gmail.com</a></li>
            <li><a href="#">本地链接</a></li>
	    </ul>
	</body>
</html>


css3伪类选择器使用总结

伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器 大部分伪类选择器如下图所示 :root返回 在下面的示例中: div > p:only-child{     color:re...
  • MOONCOM
  • MOONCOM
  • 2016年12月26日 19:44
  • 2948

CSS3学习笔记 之 动态伪类选择器

动态伪类选择器为伪类选择器的一种,其语法如下: E: pseudo-class {property:value} 其中E为HTML中的元素,pseudo-class是CSS的伪类选择器名称,pr...
  • atleks
  • atleks
  • 2014年08月31日 23:53
  • 1492

HTML5 css链接添加不同的样式

可以用css的选择器来为不同链接添加不同的样式,但经过测试,不知道为什么用id选择器并未成功,经过测试发现用class选择器是可行的,相关案例如下: 本案例是为了实现链接的文本跳转(由页面底部调到首...
  • li6727975
  • li6727975
  • 2015年02月27日 22:10
  • 1747

用css3选择器给你要的第几个元素添加不同样式方法

很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢! 我们写的html代码 实例如下: ...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2016年02月17日 14:00
  • 4202

使用CSS选择器实现超链接带带图标样式

我们在设计网站的时候,有的时候需要根据页面元素的属性来制作不同的样式,比如,对于不同的链接类型,显示不同的链接图标。CSS的选择器是个很有用的技术,通过它们,我们可以很容易的实现某些效果。今天我们通过...
  • fyqcdbdx
  • fyqcdbdx
  • 2011年12月01日 14:17
  • 2539

js css3 仿iso 选择器

  • 2016年11月11日 11:20
  • 12KB
  • 下载

CSS选择器中的空格的不同作用

css的规则里总有不同的关系,一个空格也有不同的用法,不同的地方用空格可以有不同的效果,这就值得很多朋友们注意了,不要因为一个小小的空格到时连错在哪里都没发现.........
  • shakawjh
  • shakawjh
  • 2014年07月16日 13:07
  • 1942

HTML5+CSS3实现的华丽的日期选择器源码

  • 2015年09月02日 09:24
  • 2KB
  • 下载

css3ui状态伪类选择器

  • 2016年08月22日 18:52
  • 1KB
  • 下载

CSS3选择器

  • 2014年08月12日 11:28
  • 75KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3中选择器为不同链接追加不同图标
举报原因:
原因补充:

(最多只允许输入30个字)