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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

js css3 仿iso 选择器

  • 2016-11-11 11:20
  • 12KB
  • 下载

基于css3的3D立方体旋转特效 (先translate与先rotate的不同)

3D变换基于几个比较重要的属性,perspective,translateZ,preserve-3d; 格式: 舞台(perspective) 容器(3D, preserve-3d) 内容3...

CSS3选择器

  • 2014-08-12 11:28
  • 74KB
  • 下载

CSS3层次选择器实例

  • 2016-08-22 18:51
  • 743B
  • 下载

<html5+css3+js>事件触发js代码的不同方式

(《javascript&jquery交互式web前端开发》学习记录) html5代码: Sign up List King new account ...

CSS3选择器总结

  • 2016-11-05 20:30
  • 1.27MB
  • 下载

CSS3 border-image 不同浏览器的表现记录

CSS3 border-image 这篇文章说的很详细, border-image功能强大需要大家花点时间去体验,下面是我学习时候遇到的一些问题与记录,与大家一起共享。 工具:浏览器chrome...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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