读《精通CSS》第三版 ——对链接应用样式

1、基于层叠对链接选择器进行排序（IE7和更低版本不支持在除链接之外的其他元素上使用伪类选择器）

LVHFA：Lord Vader Hates Furry Animals

2、让下划线更有趣

代码代替下划线

a:link,a:visited{border-bottom:1px dotted #000;}

3、已访问的链接的样式

a:visited{

padding-right:20px;

background:url(/img/check.gif) no-repeat right middle;

｝

4、为链接目标设置样式

.comment:target{

background-color:yellow;

|

5、突出不同类型的连接（IE6和更低版本不支持属性选择器）

 使用[att^=val]属性选择器寻找以文本http:开头的所有链接。

a[href^="http:"]{

background:url(/img/externalLink.gif) no-repeat right top;

padding-right:10px;

}

 使用[att$=val]属性选择器寻找以特定值（比如：.pdf或.doc）结尾的所有链接。

a[href$=".pdf"]{

background:url(img/pdfLink.gif) no-repeat right top;

padding-right:10px;

}

6、创建类似按钮的链接

a{

display:block;

width:6.6em;

line-height:1.4;

text-align:center;

text-decoration:none;

border:1px solid #66a300;

background-color:#8cca12;

color:#fff;

}

简单的翻转:

a:hover,a:focus{

background-color:#f7a300;

border-color:#ff7400;

}

图像翻转：

a:link,a:visited{

background:url(button.jpg) left top no-repeat;

}

a:hove,a:focus{

background:url(button2.jpg);

}

Pixy样式的翻转

a:link,a:visited{

background:url(button.jpg) left top no-repeat;

}

a:hove,a:focus{

background:url(button.jpg) right bottom no-repeat;

}

7、纯CSS工具提示

a.tooltip{

position:relative;

}

a.tooltip span{

display:none;

}

a.tooltip:hover span{

display:block;

position:absolute;

top:1em;

left:2em;

}