:first-child伪类表示父元素的第一个子元素。
例如：li:first-child{color:yellow}
表示父元素的第一个子元素是li的每一个颜色是黄色。
<ol>
<li>ff</li>
<li>dd</li>
</ol>
<ul>
<li>This text will be orange.</li>
<li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
:first-of-type表示在：前的该容器下，所有父元素的第一个元素。
例如ul :first-of-type{color:yellow}（ul 空格:first-of-type{color:yellow}）表示在ul这个容器下，所有父元素的第一个子元素颜色是黄的，同理适用于first-child
ul :first-of-type{color:yellow}
<ul>
<li>This text will be orange.</li>
<li>Lorem ipsum dolor sit amet. <span>This text will be orange.</span></li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
当没有空格时，ul:first-of-type{color:yellow},表示的是选择在父元素中第一个出现的ul，不管其在兄弟的那个地方
ul:first-of-type{color:yellow}
另外关于nth-child和nth-of-type
<section>
<p>我是第1个p标签</p>
<p>我是第2个p标签</p> <!-- 希望这个变红 -->
</section>
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：
这是个段落元素
这是父标签的第二个孩子元素
对于:nth-of-type选择器，意味着选择一个元素如果：
选择父标签的第二个段落子元素
同样适用于first-child和first-of-type
注意～odd表示奇数,even表示偶数，从1开始计算，不是从零开始。
