css补课：理解 :last-of-type

背景:

实现UI需求如图：

细节放大图

列表项均为a标签并以虚线分割， “查看更多” 为实线；

这种还是挺常见的，就列表项都是border-bottom，之后给最后一项取消border。

实现:

简化代码如下:

// css
.p{
    display:block;
    margin:10px 0;
    border-bottom:1px solid #000;
}
.p:last-child{
    border:none;
}
.more{
    display:block;
    text-align:center;
    border:1px solid #000;
}

// HTML
<div>
    <a class="p">这是第一个段落。</a>
    <a class="p">这是第二个段落。</a>
    <a class="p">这是第三个段落。</a>
    <a class="p">这是第四个段落。</a>
    <a class="more">查看更多</a>
</div>

但是。。。页面是是这样的 :

最后一项仍然是有边框的

初步怀疑：

应该是用错了。。。赶紧查了下last-child

:last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。

啊。。上面的‘第四个段落’不是父元素的最后一个，所以不生效。找找其他方案。。。

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.
CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。

听起来可行，试试：

// css
.p{
    display:block;
    margin:10px 0;
    border-bottom:1px solid #000;
}
.p:last-of-type{
    border:none;
}
.more{
    display:block;
    text-align:center;
    border:1px solid #000;
}

// HTML
<div>
    <a class="p">这是第一个段落。</a>
    <a class="p">这是第二个段落。</a>
    <a class="p">这是第三个段落。</a>
    <a class="p">这是第四个段落。</a>
    <a class="more">查看更多</a>
</div>

WHAT？！居然没什么变化

无事发生，，为什么呢，明明‘第四个段落’是一群兄弟元素(a标签)中的最后一个指定类型（.p）的元素 ！！！

了解:last-of-type，重点！！

经实践:last-of-type根据以下情况进行选择：

1.在一群兄弟元素中；

2. 首先根据标签进行分组；

3. 取每个分组里最后一个符合指定类型(class)的元素；

注：如果第3步找到的元素不是该分组的最后一个元素则失效，不会被命中。

举个🌰：

1. 按照标签分组：a标签4个 ，div标签2个

2.取每个分组的符合class的最后一项（‘第四个段落’和‘查看更多2’）

3.确认这两项都是分组的的最后一个元素。命中。

命中了a和div分别的最后一个元素

再举个🌰：

1. 按照标签分组：a标签5个

2.取每个分组的符合class的最后一项（‘第四个段落’）

3.确认这项是不是分组的的最后一个元素。不是，最后一个是“查看更多”，未命中。

image.png

===========
再重复一遍

1.在一群兄弟元素中；

2. 首先根据标签进行分组；

3. 取每个分组里最后一个符合指定类型(class)的元素；

注：如果第3步找到的元素不是该分组的最后一个元素则失效，不会被命中。

===========

以上。