您的位置：首页 > Web前端 > css > 正文

css中:first-child

更多时间：2015-6-9 类别：Web前端浏览量：1506

css中:first-child

css中:first-child

一、css中:first-child的理解

:first-child 伪类向元素的第一个子元素添加样式，利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。

例如

E:first-child 正确的理解应该是：只要E元素是它的父级的第一个子元素，就选中。它需要同时满足两个条件，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。

实例1


<style>...
span:first-child{...}{color: red;}
p:first-child{...}{color: blue;} /**//*p元素的父元素的第一个子元素是li而不是p元素，因此该样式不起作用*/
i:first-child{...}{color: orange;}
</style>

<li class="demo">
<li>.demo的第一个子元素是li</li>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第二个i元素</i></p>
<p>一个链接</p>
</li>

效果：

实例2、匹配第一个 元素


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

例子3、匹配所有 元素中的第一个 元素


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

例子4、匹配所有第一个子元素 元素中的所有 元素


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

例子5

p:first-child 匹配到的是p元素,因为p元素是li的第一个子元素；

h1:first-child 匹配不到任何元素，因为在这里h1是li的第二个子元素，而不是第一个；

span:first-child 匹配不到任何元素，因为在这里两个span元素都不是li的第一个子元素；

:first-child 匹配到的是p元素,因为在这里li的第一个子元素就是p。

二、:first-child常见的误解

1、认为E:first-child选中E元素的第一个子元素，但事实并不是


<!--误解一-->
<style>...
li:first-child{...}{color: red;}
</style>

<li class="demo">
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</li>

效果是这样的：

2、认为E:first-child选中E元素的父元素的第一个E元素，但事实并不是


<!--误解二-->
<style>...
li a:first-child{...}{color: red;}
</style>

<li class="demo">
<p>一个段落</p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</li>

效果是这样的：

标签：css

上一篇：jQuery end()

下一篇：HTTP header中Cache-control的介绍

您可能感兴趣

css中:first-child

css中:first-child

热门推荐

排行榜