nth-child和nth-of-type的使用案列

HTML:
 <div id="footer-f">
    <ul class="trajectory">
        <li>
            <div class="logo" style="vertical-align: middle"><img style="width: 100%;" src="" alt="logo"></div>
            <dl>
                <dt>小星星</dt>
                <dd><img src="img/Distances.png" alt="D"><span>351.7KM</span><img src="img/Altitude.png" alt="A"><span>500M</span>
                </dd>
                <dd><img src="img/Date.png" alt="D"><span>2016-06-01</span><img src="img/Datesfm.png" alt="D"><span>00:00:00</span><img src="img/Speed.png" alt="D"><span>1.9KM/H</span></dd>
            </dl>
            <div class="Details" ><img src="img/Details.png" alt="D">
            </div>
        </li>
    </ul>
</div>

CSS:

#footer-f {
    overflow: scroll;
    background-color: #ffffff;
    height: 77%;
}

.trajectory > li {
    overflow:hidden ;
    height: 72px;
    position: relative;
}
.trajectory > li:first-child {
    height: 105px;
}

.trajectory > li > div, .trajectory > li > dl {
    float: left;
    box-sizing: border-box;
}
.trajectory > li > div:nth-child(1) {
    width: 75px;
}

.trajectory > li > dl {
    width: 65%;
    position: absolute;
    left: 85px;
}

.trajectory > li > dl > dd:nth-child(1) {
    margin-top: 6px;
}

.trajectory > li > dl > dd {
    position: relative;
}

.trajectory > li > dl > dd img {
    width: 7px;
}

.trajectory > li > dl > dd:first-of-type span:last-child{
    position: absolute;
    left: 43%;
}

.trajectory > li > dl > dd:last-of-type span:last-child{
    position: absolute;
    left: 73%;
}

.trajectory > li > dl > dd:last-of-type span:nth-of-type(2){
    position: absolute;
    l
eft: 43%;
}
.trajectory > li > dl > dd:first-of-type img:last-of-type{
    position: absolute;
    bottom: 33%;
    left:41%;
}

.trajectory > li > dl > dd:last-of-type img:last-of-type{
    position: absolute;
    bottom: 33%;
    left:71%;
}

.trajectory > li > dl > dd:last-of-type img:nth-of-type(even){
    position: absolute;
    bottom: 33%;
    left:41%;
}
.trajectory > li > div:nth-child(3) {
    width: 45px;
}

关于nth-child和:nth-of-type的区别 ：

:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 

其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 

而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。