当前位置:首页 > CSS手册 > 正文

first-child

作者:不详 来源: 【 】 浏览: 添加日期:2008-12-12 我要评论(0)     

CSS :first-child 伪类

定义

:first-child 伪类向属于其他元素的第一个子元素的一个元素添加特殊样式.。

说明

利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素,但事实上并非如此,如果要选择段落的第一个子元素,应当写为 p > *:first-child。

例子

例子 1 - 匹配第一个 <p> 元素

在下面的例子中,选择器匹配属于任意元素的第一个子元素的 <p> 元素:

<style type="text/css">
p:first-child{
	font-weight:bold;
} 
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

例子 2 - 匹配所有 <p> 元素中的第一个 <em> 元素

在本例中,选择器匹配属于 <p> 元素中的第一个子元素的 <em> 元素:

<style type="text/css">
p>em:first-child{
	font-weight:bold;
} 
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

例子 3 - 匹配所有第一个子元素 <p> 元素中的所有 <em> 元素

在下面的例子中,选择器匹配属于其他元素的第一个子元素的 <p> 元素中的所有 <em>:

<style type="text/css">
p:first-child em{
	font-weight:bold;
} 
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖CSS手册〗Tags:

把本文章添加到会员中心我的学习计划里

相关文章

更多评论(0)..会员评论

出差旅游免费预订酒店

【视频教程】新手常见问题