CSS :first-child 选择器
完整CSS选择器参考手册
定义和用法
:first-child选择器匹配第一个子元素。
:first-child是一个伪类，它适用于任何元素，它是另一个元素的第一个子元素。
使用:first-child伪类，一个元素只有当它是另一个元素的第一个子元素时才匹配。例如，p:first-child将选择作为某个其他元素的第一个子元素的任何p元素。如果要选择段落的第一个子元素，我们可以使用p>*:first-child。
例子：
body *:first-child {font-weight: bold;}
p:first-child {font-size: 125%;}
实例
实例 1
匹配属于父元素中第一个子元素的每个<p>元素
p:first-child
{
background-color:yellow;
}
{
background-color:yellow;
}
实例 2
<p>元素是其父级的第一个子元素，每个<p>元素的 <i>元素的样式：
p:first-child i
{
background:yellow;
}
{
background:yellow;
}
实例 3
列表中的第一个 <li>元素选择的样式：
li:first-child
{
background:yellow;
}
{
background:yellow;
}
实例 4
每一个<ul>元素的第一个子元素选择的样式：:
ul>:first-child
{
background:yellow;
}
{
background:yellow;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 选择器 | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>
相关文章
CSS 教程: CSS 伪类
完整CSS选择器参考手册
