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;
}