另一個靜態(tài)偽類:first-child來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解,所以有必要舉個例子來說明。考慮以下標記:
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p> Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>
在這個例子中,作為第一個子元素的元素包括第一個p、第一個li和strong及em元素。給定以下兩個規(guī)則:
p:first-child {font-weight: bold;}
li:first-child {text-transform: uppercase;}
前一個規(guī)則將作為某元素第一個子元素的所有P元素設置為粗體。第二個規(guī)則將作為某個元素(在制作網頁HTML中,這肯定是一個ol或ul元素)第一個子元素的所有l(wèi)i元素變成大寫。
最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的第一個子元素。不過,要記住偽類的實質,它是把某種幻像類關聯到與偽類相關的元素。如果要向標記增加具體類,可能如下所示:
<div>
<p class="first-child">These are the necessary steps:</p>
<li class="first-child">Insert key</li>
<li>Turn key <strong class='first-child">clockwise</strongx/li>
<li>Push accelerator</li>
</ul>
<p> Do <em class="first-child">not</em> push the brake at the same time as the accelerator.
</p>
</div>
因此,如果想選擇作為某元素第一個子元素的em元素,應當寫作em:first-child。這個選擇器才能真正達到你的目的,例如,對列表中的第一項、div中的第一段或表行中的第一個td應用樣式。
警告:windows平臺的Internet Explorer在IE6之前不支持:first-child,不過IE7支持。