16.6. CSS :first-child 伪类

:first-child -- CSS :first-child 伪类,匹配其它元素的第一个子元素
  • 语法: :first-child
  • CSS版本:CSS2
  • 引用网址:http://www.dreamdu.com/css/pseudo-class_first-child/
  • 说明:
    • 匹配其它元素的第一个子元素,例如:一个div中包括多个p元素,匹配第一个p元素可使用:first-child伪类
  • first,中文"第一的"的意思;child,中文"子代、子节点"的意思

语法

:first-child
E:first-child
E1>E2:first-child

示例

p > code:first-child
{
	color:lime;
	background:red;
}
<p>
    <code>可以匹配样式</code>
    <code>普通正常显示</code>
</p>

<code>不可以匹配样式</code>
<p>
    <h2>不可以匹配样式</h2>
    <code>不可以匹配样式</code>
    <code>普通正常显示</code>
</p>

本例两段HTML代码,第一段可以正常匹配样式(p元素的第一个子元素为code即可匹配样式),第二段无法匹配样式

CSS :first-child 伪类示例 -- 可以尝试编辑

ul > li:first-child
{
	color:lime;
	background:red;
}

本例将展示一个列表的第一行元素被赋予样式

CSS :first-child 伪类示例 -- 可以尝试编辑

table
{
	background: forestgreen;
	color: #fff;
	width: 100%;
}

tr td:first-child
{
	background: pink;
}

本例将展示表格每行的第一个单元格被赋予样式

CSS :first-child 伪类示例 -- 可以尝试编辑

/* p是任意元素的第一个子元素(文档中的第一个段落) */
* > p:first-child

/* 同上 */
p:first-child

本例展示了两种等价的表达方式

IE浏览器不支持:first-child伪类

IE6、IE7(Q)、IE8(Q)浏览器不支持:first-child伪类,可通过上面示例测试

浏览器兼容性

CSS E:first-child 伪类浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E:first-child no part part yes yes yes yes yes

参考

延伸阅读



  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都