一:前言

事情是这样的，公司论坛要改版的时候，发现一个问题.class:last-of-type不起作用，.class:last-child也不起作用，html就像下面这样：

<div class="list">
 <div class="top">置顶帖子</div>
 <div class="top">置顶帖子</div>
 <div class="top">置顶帖子</div>
 <div>普通帖子</div>
 <div>普通帖子</div>
 <div>普通帖子</div>
</div>

我是想在顶置的帖子的最后一个想加下边框，css如下

.top:last-of-type{
  border-bottom:1px solid #000;
}

结果这样是没效果的，网上一顿搜索终于找到了原因， 原因：伪类不支持class只支持html标签元素

解决方法一

改变html结构,使用html标签元素span:last-of-type

<div class="list">
 <span>置顶帖子</span>
 <span>置顶帖子</span>
 <span>置顶帖子</span>
 <div>普通帖子</div>
 <div>普通帖子</div>
 <div>普通帖子</div>
</div>

span{display:block;}
span:last-of-type{
  border-bottom:1px solid #000;
}

解决办法二

js解决办法，给最后一个.top元素添加额外的类，给这个类添加想要的样式

$('.top').last().addClass('last');

.last{
border-bottom: 1px solid #000;
}