首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

:first-child

:first-childCSS伪类表示一组同胞元素中的第一个元素。

代码语言:javascript
复制
/* Selects any <p> element that is the first child of its parent element */
p:first-child {
  color: lime;
  background-color: black;
}

注意:如最初定义的那样,所选元素必须有一个父元素。但是从选择器级别4开始,这不再是必需的。

语法

代码语言:javascript
复制
:first-child

实例

例1

HTML

代码语言:javascript
复制
<div>
  <p>This p is styled, as it is a p AND the first
     child of its parent.</p>
  <p>This p is not styled; it is not the first child!</p>
</div>

<div>
  <h2>This h2 is not styled; it is not a p!</h2>
  <p>This p is not styled; it is not the first child!</p>
</div>

CSS

代码语言:javascript
复制
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

结果

示例2-使用列表

HTML

代码语言:javascript
复制
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS

代码语言:javascript
复制
li{
  color: blue;
}

li:first-child {
  color: green;
}

结果

规范

Specification

Status

Comment

Selectors Level 4The definition of ':first-child' in that specification.

Working Draft

Matching elements are not required to have a parent.

Selectors Level 3The definition of ':first-child' in that specification.

Recommendation

No change.

CSS Level 2 (Revision 1)The definition of ':first-child' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

4.0

(Yes)

3.0 (1.9)

71

9.5

4

No parent required

57

?

51 (51)2

?

44

?

Feature

Android Webview

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes)

(Yes)

(Yes)

1.0 (1.9.1)

71

10

3.1

No parent required

57

57

51.0 (51)2

?

?

44

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com