MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:first-child

:first-childCSS當中的一種偽類別(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;
}

呈現效果如下:

規格

規格 狀態 註解
Selectors Level 4
The definition of ':first-child' in that specification.
Working Draft 無變更
Selectors Level 3
The definition of ':first-child' in that specification.
Recommendation 無變更
CSS Level 2 (Revision 1)
The definition of ':first-child' in that specification.
Recommendation 初始定義

瀏覽器相容性

功能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基礎支援 4.0 3.0 (1.9) 7[1] 9.5 4
功能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基礎支援 1.0 1.0 (1.9.1) 7[1] 10.0 3.1

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

參見

文件標籤與貢獻者

 此頁面的貢獻者: mgrn
 最近更新: mgrn,