，CSS:last-child与:last-of-type区别

2024-04-10 06:09•css•阅读 3711

<!DOCTYPE html>

<html>

<head>

<title>last-child 和 last-of-type区别</title>

p:last-child{

color: red;

}

p:last-of-type{

color: blue;

}

</style>

</head>

<body>

<div>

<span>我是测试行</span>

</div>

</body>

</html>

运行的结果显示：没有任何一行显示为红色，第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行，但是当你注释掉蓝色选择器的时候会发现，红色依然未被选中。

其实红色未被选中的原因很简单，上篇文章已经讲过，这里简单的描述一下

:last-child选择父节点最后一个子节点，并且与选择器进行匹配，父节点div的最后一个节点是span，而匹配的选择器是p,两者不对应所以匹配不上。

而另外一个选择器

:last-of-type是从父节点的子节点中寻找最后一个与选择器相同的子节点，也就是说，这次寻找的并不是最后一个节点，而是最后一个P元素节点，所以只能找到第三行了。