关于css中last-child和last-of-type的说明

关于css中last-child和last-of-type的说明

前言

今天在写uniapp的时候，使用uView库中的tab的时候，因为二次封装修改样式，我想让最后一个tab有些特别的样式，理所应当的我就使用了last-of-type，但我发现并没有效果，但是first-of-type却有效，更离奇的是，当我删掉了最后的一个元素（非tab框元素）,居然就生效了，真是太离谱了。

为了弄清楚这个问题，于是我特意去了解了一下这两个的用法

我原本的理解（这是错的，不要看！！！只是我相信不止我一个这么以为）

:last-child：首先找到符合条件的元素的父元素，当父元素的最后一个元素符合条件的话就被选中

:last-of-type：找到符合条件的元素的父元素，该父元素的子元素中最后一个符合条件的元素被选中

官网的解释

:last-child：代表一组兄弟元素中的最后元素。

:last-of-type：表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似 Parent tagName:last-of-type 的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

但我感觉没有说到点子上，在后面群友的帮助下，在测试之后，我终于明白了到底有什么区别，以及正确的理解

第一种情况：最后一个元素是一样的

<style>
    .test-last-of-type p:last-of-type{
        color: red;
    }
​
    .test-last-child .classP:last-child{
        color: blue;
    }
</style>

<div class="test-last-of-type">
    <p>type1</p>
    <p>type2</p>
    <p>type3</p>
    <p>type4</p>
    <p>type5</p>
    <p>type6</p>
    <p>type7</p>
</div>
<div class="test-last-child">
    <p>child1</p>
    <p>child2</p>
    <p>child3</p>
    <p>child4</p>
    <p>child5</p>
    <p>child6</p>
    <p>child7</p>
</div>

结果：

可以看到，当子元素的最后一个元素都符合条件的时候，产生的效果是一样的

第二种情况：当最后一个元素不符合条件时

<div class="test-last-of-type">
    <p>type1</p>
    <p>type2</p>
    <p>type3</p>
    <p>type4</p>
    <p>type5</p>
    <p>type6</p>
    <p>type7</p>
    <span>span</span>
</div>
<div class="test-last-child">
    <p>child1</p>
    <p>child2</p>
    <p>child3</p>
    <p>child4</p>
    <p>child5</p>
    <p>child6</p>
    <p>child7</p>
    <span>span</span>
</div>

结果:

我们可以发现，原本蓝色的child7就没有被选中了

结论一

last-of-type是选择子元素中符合条件的最后一个元素

last-child是选择最后一个子元素，再判断是否符合条件再决定是否选中

第三种情况：在last-of-type下，使用除了标签选择器以外的选择器

<style>
    .test-last-of-type .cls:last-of-type{
        color: red;
    }
</style>
​
<div class="test-last-of-type">
    <p class="cls">type1</p>
    <p class="cls">type2</p>
    <p class="cls">type3</p>
    <p class="cls">span</span>
</div>

结果：

这似乎符合我们的预期，那接下来的情况结果是如何呢？

<style>
    .test-last-of-type .cls:last-of-type{
        color: red;
    }
</style>
​
<div class="test-last-of-type">
    <p class="cls">type1</p>
    <p class="cls">type2</p>
    <p class="cls">type3</p>
    <p class="cls-copy">span</p>
</div>

是选中了type3，还是选中了span呢

无论选哪个，都答错了，正确答案是：谁也不会选中

结果：

是不是很神奇，这似乎跟我们前面所说的有冲突啊，别急，且听我满满道来

这个时候我们再修改一下代码：

<div class="test-last-of-type">
    <p class="cls">type1</p>
    <p class="cls">type2</p>
    <p class="cls">type3</p>
    <span class="cls-copy">span</span>
</div>

这个时候，你就会发现，居然又生效了：

这到底是为什么呢？

原来last-of-type不能直接说成选中符合条件的最后一个子元素

它真正的查找流程是：先将元素通过标签分类，例如p、span、div等标签，分成多个小组，再对每个小组的最后一个元素判断是否符合条件，再决定是否选中

按照上面的结论，我们上面的例子可以这样理解：

首先将p标签进行分组，得到了这三个

<p class="cls">type1</p>
<p class="cls">type2</p>
<p class="cls">type3</p>

然后再将span标签分组

<span class="cls-copy">span</span>

这个时候再去判断我们的条件

.cls:last-of-type，在第一组中，最后一个p标签显然满足class='cls'的条件，于是被选中了，而span标签的class未满足条件，自然就没被选中

第四种情况

<style>
    .test-last-of-type .cls:last-of-type{
        color: red;
    }
</style>
​
<div class="test-last-of-type">
    <p class="cls">type1</p>
    <p class="cls">type2</p>
    <p class="cls">type3</p>
    <span class="cls">span</span>
</div>

通过以上的学习，这种情况的结果又是什么样的呢？

自己动手试试吧！

结论

对于last-child选择器：选中兄弟元素中的最后一个元素，判断是否符合条件再决定是否选中

对于last-of-type选择器：先将同一父元素下的子元素通过html标签（p,span,div等）进行分组，再选择每一组中的最后一个元素，根据是否符合:last-of-type的前置条件决定是否选中

最后的话

学习还是得好好学啊，有些看似简单易懂的东西，背后可能也有你想象不到的机制，最后附上我和我师兄的聊天，感受一下我的崩溃吧