對比了一下W3CSchool 中針對偽類選擇器 :last-child 以及 :last-of-type的描述，如下：
:last-child p:last-child 選擇屬於其父元素最后一個子元素每個 <p> 元素。
:last-of-type p:last-of-type 選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
說句老實話，在不懂這兩個關系的時候，越看這兩句描述，越是別扭，繞口，難懂，查閱網上資料搞懂了以后，就覺得說的還是蠻有道理的。
以一段代碼為例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>last-child 和 last-of-type區別</title> <style type="text/css"> p:last-child{ color: red; } p:last-of-type{ color: blue; } </style> </head> <body> <div> <p>第一行</p> <p>第二行</p> <p>第三行</p> <span>我是測試行</span> </div> </body> </html>
運行的結果顯示：沒有任何一行顯示為紅色，第三行顯示為藍色。或許你可能會覺得兩個選擇器選中的是同一行，但是當你注釋掉藍色選擇器的時候會發現，紅色依然未被選中。
其實紅色未被選中的原因很簡單，上篇文章已經講過，這里簡單的描述一下
:last-child選擇父節點最后一個子節點，並且與選擇器進行匹配， 父節點div的最后一個節點是span，而匹配的選擇器是p,兩者不對應所以匹配不上。
而另外一個選擇器
:last-of-type是從父節點的子節點中尋找最后一個與選擇器相同的子節點，也就是說，這次尋找的並不是最后一個節點，而是最后一個P元素節點，所以只能找到第三行了。