在IE中用javascript配合使用first-child伪类_CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　制作符合web标准的网页，经常需要定义某个父元素下的第一个子(child)元素或最后一个元素，以便将其与其他元素区分开来，有利于实现某些非凡需求。最浅显的例子是，导航项目间的竖线，我们往往通过border或者background来实现。非凡需求是，第一项左边无竖线或最后一项右边无竖线。

　　那么区分第一项好呢，还是最后一项好？答案是明显的，逼不得已，不要用区别最后一项。按照一般的编程方法，控制第一项要比控制最后一项轻易得多。

　　区分第一项的还有一个好处是，CSS有一个:first-child的伪元素（pseudo element）可以让我们轻而易举的选择第一个子元素。

　　遗憾的是，当前全球占有率最高的浏览器，IE6，并不支持这个伪元素。我们可以手工给第一个元素加上class然后再定义它。但这不是一个万无一失的办法，尤其对于页面规模达到一定数量大型网站，很轻易挂一漏万。那么，让JavaScript来帮我们完成这件工作如何？

　　查看演示效果：

代码调试框 [www.mb5u.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="陈贤安, Realazy" />
	<meta name="copyright" content="创作共用（Creative Commons）,http://www.creativecommons.cn/licenses/by-nc-sa/1.0/" />
	<meta name="keywords" content="HTML,XHTML,CSS,Web Standards,Web标准,网页设计,网页设计教程,网页标准,层叠样式表,级联样式表" />
	<meta name="description" content="在中国推广Web Standards（网页标准），推广使用XHTML CSS设计网页，设置翻译的各类指南、技术文章，让更多人有更多自由选择，推动国人的版权意识、共享精神的发展与提高。" />
	<link rev="made" href="mailto:i_anzi@yahoo.com.cn" />
	<title>给未支持:first-child的浏览器添加first-child的class</title>
	<script type="text/javascript">
		function addClassName(tag, classname) {
			if (!tag.className)
			{
				tag.className = classname;
			}
			else {
				tag.className  = " "   classname;
			}
		}

function addFirstChild() {
			var olitems = document.getElementsByTagName("ol");
			var ulitems = document.getElementsByTagName("ul");

for ( var i = 0 ; i < olitems.length ; i   )
			{
				addClassName(olitems[i].getElementsByTagName("li")["0"], "first-child");
			}
			for ( var i = 0 ; i < ulitems.length ; i   )
			{
				addClassName(ulitems[i].getElementsByTagName("li")["0"], "first-child");
			}
		}
		
		if (document.all && !window.opera)
		{
			window.onload = addFirstChild;
		}
		
	</script>
	<style type="text/css">
		body {font: 81.25%/1.7 Sans-Serif;}
		li:first-child, li.first-child {color: red;}
	</style>
</head>

<body>
<h1>给未支持<code>:first-child</code>的浏览器添加<code>first-child</code>的class</h1>
<p>请使用IE浏览器，假如您能看到每个列表项的第一个<code>li</code>的颜色是红色，那么证实我们成功地选择了<code>first-child</code>。</p>
<p>?</p>
<ul>
	<li class="someextraclass">first-child</li>
	<li>更多</li>
	<li>推动国人</li>
	<li>版权意识</li>
	<li>技术文章</li>
</ul>

<ol>
	<li>first-child</li>
	<li>更多</li>
	<li>推动国人</li>
	<li>版权意识</li>
	<li>技术文章</li>
</ol>

<ul>
	<li class="someextraclass">first-child</li>
	<li>更多</li>
	<li>推动国人</li>
	<li>版权意识</li>
	<li>技术文章</li>
</ul>

<ul>
	<li>first-child</li>
	<li>更多</li>
	<li>推动国人</li>
	<li>版权意识</li>
	<li>技术文章</li>
</ul>

<ol>
	<li>first-child</li>
	<li>更多</li>
	<li>推动国人</li>
	<li>版权意识</li>
	<li>技术文章</li>
</ol>

</body> 
</html>

[ 可先修改部分代码再运行查看效果 ]

　　在IE中，为每个属于first-child的li加上first-child的class，则CSS则可以这样书写了：:first-child, .first-child { some rules here...}（有没有发现这样写很帅，一个是冒号，两点；一个是点号，一点），十分便于维护和治理。

　　希望哪位高手能够写出通用的first-child来，我这里的例子只针对li，能力有限！
　　本文作者：Realazy
　　