:first-child
:first-child
该:first-child
CSS伪类表示一组同胞元素中的第一个元素。
/* Selects any <p> element that is the first child of its parent element */
p:first-child {
color: lime;
background-color: black;
}
注意
:如最初定义的那样,所选元素必须有一个父元素。但是从选择器级别4开始,这不再是必需的。
语法
:first-child
实例
例1
HTML
<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
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
结果
示例2-使用列表
HTML
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
CSS
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 | ? |