A-A+

CSS :first-child 伪类

2015年07月09日 htmlcss 暂无评论 阅读 79 次

: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 伪类示例 -- 可以尝试编辑

  • CSS :first-child 伪类示例
ul > li:first-child
{
	color:lime;
	background:red;
}

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

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

  • CSS first-child示例,匹配列表的第一行
table
{
	background: forestgreen;
	color: #fff;
	width: 100%;
}

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

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

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

  • 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

参考

  • CSS选择符浏览器兼容性索引

延伸阅读

  • CSS E > F 子对象选择符
  • HTML文档树

原文地址:http://www.dreamdu.com/css/pseudo-class_first-child/

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录