Laravel Blade中使用CSS :last-child移除最后一个li边框无效问题

这种情况我之前开发的时候也踩过坑！核心问题是内联样式的优先级远高于CSS类选择器——你给每个<li>直接写了style="border-bottom: 1px solid #eee;"，哪怕用:last-child定义了取消边框的规则，内联样式还是会把它覆盖掉。

给你几个靠谱的解决方案，按推荐程度排序：

1. 把内联样式移到CSS类（最推荐） #

这是最符合前端规范的做法，把样式集中到CSS里，方便维护也能解决优先级问题：

先修改CSS：

/* 给所有.pre-course元素加底部边框 */
li.pre-course {
  border-bottom: 1px solid #eee;
}
/* 最后一个元素去掉边框 */
li.pre-course:last-child {
  border-bottom: none;
}

然后Blade模板里删掉内联样式：

<ul>
  @foreach($prerequisites as $prerequisite)
    <li class="pre-course">
      <p> ... </p>
    </li>
  @endforeach
</ul>

这样类选择器的规则就能正常覆盖，:last-child也能生效了。

2. 用!important强制覆盖（迫不得已时用） #

如果因为某些限制不能移除内联样式，可以用!important强制提升CSS规则的优先级，但不推荐经常用，会让样式维护变复杂：

ul li.pre-course:last-child {
  border-bottom: none !important;
}

3. 在Blade循环里动态判断 #

利用Laravel Blade循环自带的$loop变量，判断当前是不是最后一项，动态设置样式：

<ul>
  @foreach($prerequisites as $prerequisite)
    <li class="pre-course" style="border-bottom: {{ $loop->last ? 'none' : '1px solid #eee' }};">
      <p> ... </p>
    </li>
  @endforeach
</ul>

这里$loop->last会在循环到最后一个元素时返回true，从而动态设置边框样式。

内容的提问来源于stack exchange，提问作者DolDurma