last-child 和 last-of-type 到底有啥区别

43 阅读1分钟

一直对last-childlast-of-type区分不开来。last-child比较好理解,就是同一组兄弟元素中的最后一个元素,举个例子:

上述例子匹配的条件写成伪代码就是 最后一个位置&&div标签

last-of-type,则不一样,实际上last-of-type是先对同类型的标签进行分组,然后再匹配位置,写成伪代码就是 同类型标签分组 && 最后一个位置,举个例子:

image.png

可以看到是对pdiv标签先各自分组,然后匹配最后一个位置。 不过还有一点要注意的是用类名做匹配时,并不会根据类名进行分组,然后再进行匹配

可以看到没有成功给类名为.a的标签设置背景,实际上此时的搜索条件是 同类型标签分组&&最后一个位置&&类名a