在IE中用javascript配合使用first-child偽類_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　制作符合web標(biāo)準(zhǔn)的網(wǎng)頁，經(jīng)常需要定義某個父元素下的第一個子(child)元素或最后一個元素，以便將其與其他元素區(qū)分開來，有利于實現(xiàn)某些非凡需求。最淺顯的例子是，導(dǎo)航項目間的豎線，我們往往通過border或者background來實現(xiàn)。非凡需求是，第一項左邊無豎線或最后一項右邊無豎線。

　　那么區(qū)分第一項好呢，還是最后一項好？答案是明顯的，逼不得已，不要用區(qū)別最后一項。按照一般的編程方法，控制第一項要比控制最后一項輕易得多。

　　區(qū)分第一項的還有一個好處是，CSS有一個:first-child的偽元素（pseudo element）可以讓我們輕而易舉的選擇第一個子元素。

　　遺憾的是，當(dāng)前全球占有率最高的瀏覽器，IE6，并不支持這個偽元素。我們可以手工給第一個元素加上class然后再定義它。但這不是一個萬無一失的辦法，尤其對于頁面規(guī)模達(dá)到一定數(shù)量大型網(wǎng)站，很輕易掛一漏萬。那么，讓JavaScript來幫我們完成這件工作如何？

　　查看演示效果：

代碼調(diào)試框 [www.zhaotila.cn]

<!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="http://www.zhaotila.cn/"/>
	<meta name="copyright" content="創(chuàng)作共用（Creative Commons）,http://www.creativecommons.cn/licenses/by-nc-sa/1.0/" />
	<meta name="keywords" content="HTML,XHTML,CSS,Web Standards,Web標(biāo)準(zhǔn),網(wǎng)頁設(shè)計,網(wǎng)頁設(shè)計教程,網(wǎng)頁標(biāo)準(zhǔn),層疊樣式表,級聯(lián)樣式表" />
	<meta name="description" content="在中國推廣Web Standards（網(wǎng)頁標(biāo)準(zhǔn)），推廣使用XHTML CSS設(shè)計網(wǎng)頁，設(shè)置翻譯的各類指南、技術(shù)文章，讓更多人有更多自由選擇，推動國人的版權(quán)意識、共享精神的發(fā)展與提高。" />
	<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 id="zxbcaqn"    class="someextraclass">first-child</li>
	<li>更多</li>
	<li>推動國人</li>
	<li>版權(quán)意識</li>
	<li>技術(shù)文章</li>
</ul>

<ol>
	<li>first-child</li>
	<li>更多</li>
	<li>推動國人</li>
	<li>版權(quán)意識</li>
	<li>技術(shù)文章</li>
</ol>

<ul>
	<li id="tkmj5tx"    class="someextraclass">first-child</li>
	<li>更多</li>
	<li>推動國人</li>
	<li>版權(quán)意識</li>
	<li>技術(shù)文章</li>
</ul>

<ul>
	<li>first-child</li>
	<li>更多</li>
	<li>推動國人</li>
	<li>版權(quán)意識</li>
	<li>技術(shù)文章</li>
</ul>

<ol>
	<li>first-child</li>
	<li>更多</li>
	<li>推動國人</li>
	<li>版權(quán)意識</li>
	<li>技術(shù)文章</li>
</ol>

</body> 
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　在IE中，為每個屬于first-child的li加上first-child的class，則CSS則可以這樣書寫了：:first-child, .first-child { some rules here...}（有沒有發(fā)現(xiàn)這樣寫很帥，一個是冒號，兩點；一個是點號，一點），十分便于維護(hù)和治理。

　　希望哪位高手能夠?qū)懗鐾ㄓ玫膄irst-child來，我這里的例子只針對li，能力有限！
　　本文作者：Realazy
　　