<ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ul>

　　li:nth-child(2) {

color:red;

}

選擇器：

li:nth-of-type(2){

color:red;

}

顯示的效果

這個時候 li:nth-child(2) 與 li:nth-of-type(2) 選擇的是同一個 顯示的效果是一樣的

但............

因為沒有選擇到任何東西，所有這個時候 li:nth-child(2) 失效了

選擇是的 第二個li 元素 這個時候就看出來 nth-child 與 nth-of-type 這兩個選擇器的區別了

選擇器 nth-child和 nth-of-type的區別