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

最新推荐文章于 2023-02-02 10:53:09 发布

pvfhv

最新推荐文章于 2023-02-02 10:53:09 发布

阅读量689

点赞数

分类专栏： div+css 文章标签： css3属性选择器

本文链接：https://blog.csdn.net/pvfhv/article/details/6155087

版权

div+css 专栏收录该内容

14 篇文章 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>

pvfhv

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3中选择器为不同链接追加不同图标

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

扫一扫