css 随笔

[b]a 元素伪类的修饰[/b]
要遵循L-V-H-A link-visted-hover-active顺序；

[b]图片下划线修饰[/b]

a:link,a:visted{
 color:#666666;
 text-decoration:none;
 background:url(images/underline.gif) repeat-x left bottom;
}
/*主要是靠图片的定位做到的*/

[b]css3.0可以做到的[/b]

a[href^="http:"]{
 /*所有以http:开始的链接*/
}
a[href$=".doc"]{
  /*所有以.doc结尾的链接*/
}

[b]按钮链接[/b]

a{
 display:block;
 width:6em;
 padding:0.2em;
 height:40px;
 line-height:40px;
 text-decoration:none;
 text-align:center; 
}/*如果没设置height和height，设置显示为block，也只有连接文本会激活，需要设置行高的，*/

[b]按钮图片的反转[/b]

a{
 background:url(images/button.gif) no-repeat left top;
}
a:hover{
 background:url(images/button.gif) no-repeat right top;
}

[b]tooltip[/b]

a.tooltip{
 position:relative;
}
a.tooltip span{
 display:none;
}
a.tooltip:hover span{
 position:absolute;
 display:block;
}

[b]bug[/b]
html>body /*ie6或更低版本不支持子选择器*/

* html /*ie6或更低版本有效，html被认为是根元素，但是ie的所有当前版本有一个匿名的根元素，它包围着html元素。除ie之外的浏览器都会隐藏这个规则*/

/*Hiding from IE5|Mac \*/
所有浏览器会忽略这个转义，兵应用后面的规则， 但是ie5|mac会认为注释还没有结束，因此把下一个结束注释字符前面的所有内容都忽略

position:fixed !important;
position:static;
/*ie[4-6]/Win会忽略第一个声明，应用第二个声明，其他浏览器会应用第一个声明，！important关键字，提高了层叠中的优先级。*/

_posisiton /*ie6或更低版本会忽略"_"下划线，应用该属性，标准的浏览器会忽略该属性*/