僞類:first-child的測試

first-child其實是一個很好的東西,只是IE一直不支持,不知道是出於什麼考慮的,有點無聊。 

還記得極遙遠的時候,這個問題是xiaoming同學問的。如何在不動原來的代碼情況下,只弄個外部css來改變某塊東東里面的第一個元素的樣式。

很自然,這個問題一下就會讓人想到用:first-child,只不過萬惡的ie不支持,只能用js或expression了。

由於FF,Opera,Mozilla等瀏覽器支持:first-child,所以只要給ie寫個hack就行了。這裏只簡單做一下:first-child的效果。

[演示地址:http://www.doyoe.com/model/xhtmlcss/style/firstchild.htm

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飄零霧雨|[email protected]" />
<title>firstChild</title>
<style type="text/css">
.test a:first-child {color:#f00;}
</style>
<!--[if IE]>
<style type="text/css">
.test {start:expression(this.getElementsByTagName("a")[0].style.color="#ff0000")}
</style>
<![endif]-->
</head>
<body>
<div class="test">
 <a href="#">test</a>
 <a href="#">test</a>
 <a href="#">test</a>
</div>
</body>
</html>

ie又折騰了我一次,讓我多寫了好幾行代碼。 

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章