还记得极遥远的时候,这个问题是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="飘零雾雨|edzmaster@gmail.com" /><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又折腾了我一次,让我多写了好几行代码。