2012年2月22日

[CSS] Pseudo-classes (擬類型) 的作用對象

Pseudo-classes (擬類型,例如 :hover) 有時候會被誤以為只能作用在<a>上 (IE對很多擬類選擇器的支援不佳),其實它們對所有的元素都是有效的,可參考以下說明:
http://www.w3.org/TR/CSS2/selector.html#pseudo-elements
http://reference.sitepoint.com/css/pseudoclasses

P.S. 超連結擬類的定義要按照以下順序,可以用 love, hate 這兩字來幫助記憶:
a:link { /*尚未瀏覽的連結*/ }
a:visited { /*已瀏覽過的連結*/ }
a:hover { /*滑鼠移到連結上時*/ }
a:active { /*滑鼠點擊連結時*/ }

另外,這是IE的CSS相容性列表:
http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx
其中 :first-child:nth-child:last-child 的使用率都蠻高的,可以用jQuery來為IE加工一下,例如:

//jQuery snippet:
if ( $.browser.msie ) {
   $("ul li:last-child").addClass("last");
}


這樣就可以在CSS中設定
<li class="last"></li>
的樣式了

沒有留言:

張貼留言

關於我