关闭

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

标签: css3属性选择器
377人阅读 评论(0) 收藏 举报
分类:

以前在美化网页时,经常会为不同的链接追加不同的图标,以示区别明确告诉用户这是个什么样的链接,更直接。传统的作法是定义不同的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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:316871次
    • 积分:4897
    • 等级:
    • 排名:第5794名
    • 原创:171篇
    • 转载:2篇
    • 译文:0篇
    • 评论:33条
    文章分类
    最新评论