:first-child - CSS（层叠样式表） 编辑

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

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

相关链接

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