:last-of-type , :last-child 无效的问题

:last-of-type 无效碰到的问题：

<style> 
.c:last-of-type{
	background:red;
}
</style>

eg 1：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<p >这是第四个段落。</p>

⬇️结果如下，背景颜色并没加上：

eg 2：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<p class='c'>这是第四个段落。</p>

⬇️给最后一行加上class=c的名字，便可以生效。

eg 3：

再将最后一个c的标签换掉，如下：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div class='c'>这是第四个段落。</div>

⬇️结果如下：

eg 4：

再将最后一行的class去掉，和eg 1对比，就是最后一行p换为div，但此时会有一行变成红色：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div>这是第四个段落。</div>

⬇️结果如下：

总结：

:last-of-type会识别 标签和类名 一致的最后 类名 的那个元素(与:last-child 区别在于，不用管是不是对于父元素的最后那个元素)。

---

:last-child

<style> 
.c:last-child {
	background:#ff0000;
}
</style>

eg 1：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div class='c'>这是第四个段落。</div>

⬇️结果如下：
与:last-of-type 不同，未区分标签是否相同。

eg 2：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div>这是第四个段落。</div>

⬇️结果如下：
此时父元素最后一个子元素，并没有classname为c的标签，所以，都没有生效。

总结：

:last-child 并不区分 标签和类名 要一致才算最后一个，:last-child是只要相对父标签内最后一个标签有此类名即可生效。