CSS参考手册
选择 | Selectors
: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 |
? |
选择 | Selectors相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。