CSS Selector中:nth-child()與:nth-of-type()的差異性
今天到CSS Diner網站中，去進行了CSS Selector的訓練，這是一個非常好的網站，建議有涉汲到前端（F2E）的人都一該要玩一下，雖然我都是在後端（ServerSide）工作的人，但是我還是覺得這是個值得一試的網站。
全部有26關，基本上如果你有用過jQuery或者是稍有程式底子的人，應該都不難完成才對。但是，我怎麼樣就是卡在第19關（Level 19），在網路上翻了很多文章，有許多人都說Level 19應該是Bug，就在我決定放棄了這一關時，我在Hacker News上發現了一篇討論，讓我決定好好的回到W3C School翻一下白皮書。
//有許多人都覺得第19關（Level 19）應該要下這樣的指令
bento:nth-last-child(2) { ... }
但是相信我，上面的程式碼絕對是錯的，因為你被第18關的關卡設計誤導了。我們來看一下第18關的DOM與指令如下所示：
//HTML *目標要挑第3個
<div class="table">
<plate></plate>
<plate></plate>
<plate></plate>
<plate id="fancy"/></plate>
</div>
//於是我們的css就這樣下
plate:nth-child(3) { ... }
經由上面第18關的程式碼出現了一個很嚴重的誤導，就是我們認為:nth-child()（或者是:nth-last-child()）會自動幫我們把相似DOM Items集合起來，並汰除掉其它的垃圾，但其實並不是我們想的這樣。因此，到第19關的時候，你就會直覺的想要下「bento:nth-last-child(2) { ... }」，會這樣想並不感到意外。
X:nth-child()真正的意思
X:nth-child()真正的意思是指，「以DOM Block區塊為層級，若該層級內有以X元素為「啟始元素」之條件，那麼就把這個區塊中的所有子元素（包含非X元素）挑選進來。」，這句話的意思我們用簡單的程式碼來逐一解析：
//假設我們的css指令是，在這邊先不討論群組後的index編號，也就是n值
p:nth-child(n) { ... }
//HTML 指令碼範例
//p1, p2 都會中
<body>
<p>1</p>
<p>2</p>
</body>
//p1, span1, p2 都會中
<body>
<p>1</p>
<span>1</span>
<p>2</p>
</body>
//全部都不會中，因為body區塊下，啟始並非p元素
<body>
<span>1</span>
<p>2</p>
</body>
//{p1, span1, p2, div}, {p3, p4} 都會中
//會用{}表示是因為這被分為兩個Group，也就是p1, p3的index都是1
<body>
<p>1</p>
<span>1</span>
<p>2</p>
<div>
<p>3</p>
<p>4</p>
</div>
</body>
//{p1, span1, p2, div, p5}, {p3, p4} 都會中
//會用{}表示是因為這被分為兩個Group，也就是p1, p3的index都是1
<body>
<p>1</p>
<span>1</span>
<p>2</p>
<div>
<p>3</p>
<p>4</p>
</div>
<p>5</p>
</body>
//p3, p4 會中
//p1 前被加入了span0，所以p系列再也不是body block下的啟始元素，因此會被整個忽略
<body>
<span>0</span>
<p>1</p>
<span>1</span>
<p>2</p>
<div>
<p>3</p>
<p>4</p>
</div>
<p>5</p>
</body>
X:nth-last-child()真正的意思
X:nth-last-child()的意思與X:nth-child()雷同，但不是只有index編號從後面為1開始計算而已，而是邏輯裡面進行真正的顛倒。真正的意思是指，「以DOM Block區塊為層級，若該層級內有以X元素為「終止元素」之條件，那麼就把這個區塊中的所有子元素（包含非X元素）挑選進來。」
有了這些觀念，那我們再回來CSS Diner的Level 19來看看正確的答案，就會覺得一切都是那麼的自然了！
//HTML *目標要挑.table下的第1個bento
<div class="table">
<plate></plate>
<bento></bento>
<apple class="small"/>
<plate>
<orange/>
<orange/>
<orange/>
</plate>
<bento></bento>
</div>
//於是我們的css就這樣下，這才是正確答案
plate:nth-last-child(4) { ... }
//為何是4，還記得是所有子元素吧，所以由下往上逆著算元素應該是{bento1, plate2, apple3, bento4, plate5}
:nth-of-type()的使用方式
X:nth-of-type()的使用方式就很接近一般人的的直覺了，它不去管X是否是Block的起始或終止，挑出來的元素也會幫你過濾非X的元素，群組功能依然保留，因此，如果你沒有要做複雜用途的人，還是乖乖的使用:nth-of-type()會好很多。
若CSS Diner連結無法連上，這裡可以下載備份離線版的CSS Diner