first-child和first-of-type的区别

今天在工作中遇到一个不是问题的小问题，错用first-child，导致样式没生效。
需求是需要使用伪元素为ul下边的li添加一个图标，在没注意分析代码的前提下就贸然使用了first-child，结果并没有生效。真是让人一头大汗。接下来分享一下遇到的这个不是问题的问题：
代码类似于：

<ul>
       <div>我是个另类</div>
       <li>我是第一个</li>
       <li>我是第二个</li>
       <li>我是第三个</li>
       <li>我是第四个</li>
       <li>我是第五个</li>
   </ul>

然后，我就想给第一个li添加一个图标，于是有了下边的css代码：

ul li:first-child::before {
    content:"";
    display: block;
    height:12px;
    width:12px;
    background:url(../images/icon-timestart.png) center no-repeat;
    background-size:100%;
    position:absolute;
    top:-20px;
    left:-90px; 
}

可是，打开chrome，刷新，咦，咋不生效？我哪儿写错了，我怎么找不到，是什么蒙蔽了我的双眼？
然后，打开浏览器-新建标签-百度，才发现犯了一个愚蠢至极的错误，这li上边多了个另类啊，然后就改变代码：

ul li:first-of-type::before {
    content:"";
    display: block;
    height:12px;
    width:12px;
    background:url(../images/icon-timestart.png) center no-repeat;
    background-size:100%;
    position:absolute;
    top:-20px;
    left:-90px; 
}

那么，两个的区别是什么呢？
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。


好了，又一个坑踩过去了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~