前提知識
- CSS選擇器匹配規則：
從右向左 - 所有選擇器全部匹配CSS樣式纔會生效
- 同一樣式同一權重值，靠後聲明的纔會生效
:last-child
規範文檔：
represents the last element among a group of sibling elements
相對父節點的所有兄弟節點中的最後一個元素
:last-of-type
規範文檔：
represents the last element of its type among a group of sibling elements.
相對父節點的指定類型兄弟節點中的最後一個元素
例子
<style>
p:last-of-type {
color: #f00;
}
p:last-child {
color: #0f0;
}
</style>
<body>
<p>我是第一個段落</p>
<p>我是第二個段落</p>
<p>我是第三個段落</p>
<span>中出一個叛徒span</span>
</body>
上述代碼會發現第三個段落變紅。
原因
- p:last-child選中的是兄弟節點中的最後一個，即<span>標籤，而前面是p選擇器，無法匹配，故樣式無法生效
- p:last-of-type選中的是
指定<p>標籤後的最後一個，與p選擇器匹配，故樣式生效 - 同時兩者權重以及樣式相同，在能生效的情況下，p:last-child聲明靠後，應顯示綠色，此時顯示紅色無效也說明p:last-child未匹配
