:last-of-type 对选择器不起作用

:last-of-type 对选择器不起作用
CSS实际上并不存在 .class:last-of-type 这种选择方式

---

误解

一直以为，像:last-of-type这样的伪类选择器可以对class起作用，以下面的代码为例子，想取得class=green中最后一个li

.green:last-of-type{
    background-color: yellowgreen;
}

<ul>
    <li class="green">1</li>
    <li class="green">2</li>
    <li class="green">3</li>
</ul>

就效果而言，确实可以改变最后一个li的背景色，但实际上这是个巧合，如果在html里添加多一行：

<ul>
    <li class="green">1</li>
    <li class="green">2</li>
    <li class="green">3</li>
+   <li>3</li>
</ul>

无论是<li class="green">3</li>还是<li>3</li>，背景色样式就不会起作用了,因为没有符合条件的元素。

MDN给出的语法是

element:last-of-type { style properties }

从上可见，是对element元素起作用，而不是对class起作用

.green:last-of-type实际上满足这样的条件才会生效：
是父标签中子标签的最后一个，且类名为green，即同时要满足是最后一个与类名为指定类名两个条件，区别于单纯的li:last-of-type

以前都只是因为，包含某个类名的最后一个元素恰巧也是兄弟元素中的最后一个，所以造成了误解。那想要实现.class:last-of-type这样的选择该怎么办？到最后也没有找到好的方法，只能改变html的结构，让他符合上面的两个条件，要么把<li>3</li>放到另外的ul中，要么把li标签换成其他标签。当然，如果位置相对固定的话也可以使用:nth-last-of-type()或者:nth-first-of-type()特别指定。

:last-child 和 :last-of-type 的区别

由上面的分析可知，这两个选择器的正确用法应该在冒号前面加标签名，也就是li:last-child这样，而下面的对比基于这样正确的用法上

先放结论：

• :last-child 需要满足是父标签中子标签的最后一个、标签名匹配选择器两个条件，才能选出想要的元素

• :last-of-type 只需满足是父标签中子标签的最后一个即可

如下面的例子中，因为最后一个节点为p而不是li，所以li:last-of-type可以正确选出<li>3</li>而li:last-child则不行

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <p>4<p>
</ul>