《
CSS属性选择器制作个性化链接样式》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333552013.htm
双击代码全选 1 2 3 4 5 a[href^="mailto:"] { ,
CSS属性的缩写; background-position:right -242px; }
word文档
需要留神的是，CSS选择器无论CSS ２.１版本仍是CSS 3版本，IE7跟IE8都支持，webkit、Gecko中心及Opera也都支撑,CSS属性Vertical Align使用方法讲解，只有IE6以下阅读器才不支持。
最后让我们看看完全的样式吧：
2.定义个性化样式
mailto
当初咱们来为各品种型的链接定义各自的样式，实在这个时候我们须要做的仅仅是定义不同的背景图片地位(background-position)：
语法 用法 css版本 [att=val] 属性"att"值为"val"的元素 css 2.1 [att] 包含",
CSS将图像设置为背景;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] 名字空间下的",
CSS实用表格示例(带注释);attr"属性的元素，不常用 css 3 [att^=val] 属性att的值以"val"开头的元素 css 3 [att*=val] 属性att的值包含"val"字符串的元素 css 3 [att$=val] 属性att的值以"val"结尾的元素 css 3
1.链接的基本样式
这样，我们就为所有的链接定义了默认的样式了，所有的链接右侧都会显示一个红色的小箭头图标。
而我们在应用的时候，也不需要增加额定的class：
对于包含某个字符串的链接，可以使用[att*=val]这种方法：
双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 a { background:url(a.gif) no-repeat right 4px; padding-right:18px;color:#369;line-height:24px; } a[href^="mailto:"] {background-position:right -242px;} a[href$=".doc"] {background-position:right -161px} a[href$=".xls"] {background-position:right -282px} ,
CSS实用技巧18招; a[href$=",
css实现鼠标经过图片显示边框的代码;.pdf"] {background-position:right -79px} a[href$=".mp3",
CSS实现鼠标滑过表格变色;] {background-position:right -204px} a[href$=".swf"] {background-position:right -120px} a[href$=".rar"] {background-position:right -38px} a[href*="qianduan.net"] {background-position:right -328px}
其实实现这样的功效十分容易，我们先来看看CSS的属性选择器的语法：
双击代码全选 1 2 3 4 5 a[href$=".doc"] { background-position:right -160px }
双击代码全选 1 2 3 4 5 6 7 8 9 10 11 a { background:url(a.gif) no-repeat right 4px; padding-right:18px; color:#369; line-height:24px; }
仅此罢了。
--> [
网站建设之]CSS属性抉择器制造个性化链接款式
我们在
设计网站的时候，有的时候需要依据页面元素的属性来制作不同的样式，比方，对不同的链接类型，显示不同的链接图标。CSS的选择器是个很有用的技巧，通过它们，我们能够很轻易的实现某些后果。今天我们通过制作个性化链接样式来先容一下CSS的属性选择器。
我们个别以为，所有的doc文件链接都是href=”abc.doc”这种格式，也就是链接地址一.doc停止，那么我们需要使用[att$=val]这种格式。样式如下：
正如上图中看到的那样，我们为每种链接定义了不同的样式：当链接a的href属性的值为"mailto"邮件链接的时候，在该链接后面显示一个邮件的图标；当链接为word文件时，后面显示word文档图标；当链接地址为mp3的时候，显示音乐播放图标；当链接地址包括"qianduan.net"的时候，就显示一个首页图标……
包含qianduan.net字段的链接
PDF、excle、mp3等格局的文档也是通过这种方式来实现的。
首先我们筹备了一个CSS Sprites的图片，我们将所有的图标都整合到这一个a.gif中。
Tag：链接 样式 个性化 制作 属性 取舍 链接 样式 个性化 制作 属性 挑选
双击代码全选 1 2 3 4 5 a[href*="qianduan.net"] { background-position:right -328px ,
css实现页面文字不换行、自动换行、强制换行; }
先看一下演示吧：
双击代码全选 1 <a href=",
CSS实现绝对的完美圆角框;abc.doc">,
CSS实现简单圆角效果;Word文档</a>
mailto邮件链接是形如href=”mailto:abc@abc.com”的样式，它们的href属性的值以mailto开头，那么我们使用[att^=val]这种格式：
好了，让我们来实现这些样式吧：
(责任编辑：网站建设)
CSS属性选择器制作个性化链接样式相关文章