另一個(gè)靜態(tài)偽類(lèi)：first-child來(lái)選擇元素的第一個(gè)子元素。這個(gè)特定偽類(lèi)很容易遭到誤解，所以有必要舉個(gè)例子來(lái)說(shuō)明?？紤]以下標記：

<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>

在這個(gè)例子中，作為第一個(gè)子元素的元素包括第一個(gè)p、第一個(gè)li和strong及em元素。給定以下兩個(gè)規則：

p:first-child {font-weight: bold;}

li:first-child {text-transform: uppercase;}

前一個(gè)規則將作為某元素第一個(gè)子元素的所有P元素設置為粗體。第二個(gè)規則將作為某個(gè)元素（在制作網(wǎng)頁(yè)HTML中，這肯定是一個(gè)ol或ul元素）第一個(gè)子元素的所有li元素變成大寫(xiě)。

最常見(jiàn)的錯誤是認為p:first-child之類(lèi)的選擇器會(huì )選擇p元素的第一個(gè)子元素。不過(guò)，要記住偽類(lèi)的實(shí)質(zhì)，它是把某種幻像類(lèi)關(guān)聯(lián)到與偽類(lèi)相關(guān)的元素。如果要向標記增加具體類(lèi)，可能如下所示：

<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>

因此，如果想選擇作為某元素第一個(gè)子元素的em元素，應當寫(xiě)作em:first-child。這個(gè)選擇器才能真正達到你的目的，例如，對列表中的第一項、div中的第一段或表行中的第一個(gè)td應用樣式。

警告：windows平臺的Internet Explorer在IE6之前不支持：first-child,不過(guò)IE7支持。