:nth-child與:nth-of-type的區別

html:

<div class="box">
        <p>p</p>
        <p>p</p>
        <p>p</p>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        ul
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>
        ul
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>
        ul
        <ul>
            <li>li</li>
            <li>li</li>
            <li>li</li>
        </ul>
    </div>

CSS:

.box{
    width: 200px;
    margin: 0 auto;
    border: 0;
    padding: 0 0;
}
ul,li{
    list-style: none;
}
ul{
    height: 100px;
    margin: 0 0;
    border: 0;
    padding: 0 0;
}
.box div,p,li{
    /*width: 100%;*/
    height: 20px;
    margin: 10px 10px;
    border: 2px solid #116644;
}

1. :nth-child

   :nth-child(2)
   

   p:nth-child(2)
   
   div:nth-child(2)
   
   ul:nth-child(2)
   
   li:nth-child(2)

2. :nth-of-type
   :nth-of-type(2)
   
   p:nth-of-type(2)
   
   div:nth-of-type(2)
   
   ul:nth-of-type(2)
   
   li:nth-of-type(2)