您当前位置：首页 > web前端 > htmlcss > CSS选择器创建个性化链接样式的教程

CSS选择器创建个性化链接样式的教程

来源：程序员人生发布时间：2014-05-22 22:27:23 阅读次数：3321次

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

先看一下演示吧：

css-selectors-a

正如上图中看到的那样，我们为每种链接定义了不同的样式：当链接a的href属性的值为"mailto"邮件链接的时候，在该链接后面显示一个邮件的图标；当链接为word文件时，后面显示word文档图标；当链接地址为mp3的时候，显示音乐播放图标；当链接地址包含"qianduan.net"的时候，就显示一个首页图标……

其实实现这样的功能非常容易，我们先来看看CSS的属性选择器的语法：

语法	用法	css版本
[att=val]	属性"att"值为"val"的元素	css 2.1
[att]	包含"att"属性的元素	css 2.1
[att\|=val]	匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”	css 2.1
[att~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素	css 2.1
[ns\|attr]	名字空间下的"attr"属性的元素，不常用	css 3
[att^=val]	属性att的值以"val"开头的元素	css 3
[att*=val]	属性att的值包含"val"字符串的元素	css 3
[att$=val]	属性att的值以"val"结尾的元素	css 3

需要注意的是，CSS选择器无论CSS ２.１版本还是CSS 3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下浏览器才不支持。

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 奥运会黄金时间站长也要好好利用时机哦

下一篇 长期使用中型Access数据库的一点经验

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点