董叔叔

标签： css

  • css伪类选择器.class:last-of-type为什么不起作用

    一:前言

    事情是这样的，公司论坛要改版的时候，发现一个问题.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;
}