:first-child CSS pseudo-class 表示在一组兄弟元素中的第一个元素。

/* Selects any <p> that is the first element
   among its siblings */
p:first-child {
  color: lime;
}

Note: 最初定义时,所选元素必须有一个parent。而从选择器 Level 4 开始,parent不再是必须的。

语法

:first-child

示例

Basic example

HTML

<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>

CSS

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Result

Styling a list

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>

CSS

ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}

Result

Specifications

Specification Status Comment
Selectors Level 4
:first-child
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
:first-child
Recommendation No change.
CSS Level 2 (Revision 1)
:first-child
Recommendation Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:first-childChrome Full support 4Edge Full support 12Firefox Full support 3IE Full support 7
Notes
Full support 7
Notes
Notes Internet Explorer 7 doesn't update :first-child styles when elements are added dynamically.
Notes In Internet Explorer 8, if an element is inserted dynamically by clicking on a link, then the :first-child style isn't applied until the link loses focus.
Opera Full support 9.5Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support Yes
Matches elements with no parentChrome Full support 57Edge No support NoFirefox Full support 52IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 52Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

相关链接

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,