last-child到底怎么用

今天工作时候遇到的坑，

看来还是css基础不够扎实，特此记录一下,

<div>

<p>1</p>

<p>2</p>

<p>3</p>

<span>哈比</span>

</div>

p:last-child是选择不到的，这是为什么呢?

el:last-child 的匹配规则是：第一步，查找 el 选择器匹配元素的所有同级元素（siblings）；第二步，在同级元素中查找最后一个元素；第三步，检验最后一个元素是否与选择器 el 匹配。

顺便提一下 :last-type-of 这个伪类，在这里是可以用的。

但是last-type-of的规则也是要注意的,如果遇到这种情况:

<div>

<div class='a'>

<div class='a'>

<div class='a'>

<div class='b'>

</div>

我选写 .a:last-type-of 也是选择不到的，因为这个东东匹配的是元素类型，最后一个元素的类型也是div，所以并不行。