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