css last-child和last-of-type

The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.

屏幕快照 2019-04-11 上午9.38.29.png

最后一个p会被加上样式，前提是，p后面没有干扰元素，如果p后面有其他元素，div什么的，那么就会选不中了，所以last-child指的是p必须是某个父亲的最后一个孩子，

The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
hahahhaah

p:last-of-type
{
    background:#ff0000;
}
div:last-of-type
{
    background:yellow;
}

屏幕快照 2019-04-11 上午9.42.09.png

last-of-type就是指最后一个指定标签的最后一个

The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.
hahahhaah

.last:last-of-type
{
    background:#ff0000;
}

屏幕快照 2019-04-11 上午9.48.58.png

因为没有指定是p还是div所以是两个都选中了，但是如果是last-child的话，只能是最后一个div被加上类，如果写p.last:last-child则一个也选不中，因为p不是最后一个孩子