:first-child

:first-child是CSS當中的一種偽類別（pseudo-class），代表任何身為長子的元素（親元素的第一個子元素）。

語法

:first-child { style properties }

範例

範例 1

HTML 內文

<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>

CSS 內文

span:first-child {
    background-color: lime;
}

呈現效果如下：

範例 2 - 使用 UL

HTML 內文

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS 內文

li{
  color:red;
}
li:first-child{
  color:green;
}

呈現效果如下：

規格

瀏覽器相容性

[1] 在不重新載入網頁的情況下，Internet Explorer 7 的樣式表並不會套用在動態新增的元素上。在 Internet Explorer 8，若元素是以點擊連結而形成的，則 first-child 在該連結不被選取後才有作用。

參見

• :last-child
• :nth-child
• :last-of-type