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、匹配第一个 <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>
例子3、匹配所有 <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>
例子4、匹配所有第一个子元素 <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>
例子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>
效果是这样的：