【Web前端】CSS 选择器之 last-child 与 last-of-type

前言

今天在做 demo 时，last-child 与 last-of-type 发生了混淆，在此记录。

last-child

先看一下 w3school 中的解释：
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

last-of-type

:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

比较与区别

在某些情况下，两者的使用效果是一样的，如果理解不透彻，就会出现一些问题。
例子一：

 <div>     <p>一</p>     <p>二</p>     <p>三</p>      <p>四</p>  </div>

p:last-child ，p:last-of-type 将会作用到第四个 p 元素 <p>四</p>
例子二：

<div>     <p>一</p>     <p>二</p>     <p>三</p>      <a>四</a> </div>

p:last-child 将匹配不到任何对象；
而 p:last-of-type 则只会作用到第三个 p 元素 <p>三</p>
因为第四行，也就是最后一个元素是不同类型的 a 元素。

总结

许多东西还是纸上得来终觉浅，练习的时候才会发现小问题不断。