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;    left: 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，若不是，则选择失败。