php - CSS :last-child using on Laravel @foreach

Question

关于 Laravel我正在使用这段代码遍历一个由数组填充的列表:

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

关于这个我的代码每个<li>有border-bottom: 1px solid #eee;我正试图用 Css 删除最后一个 child 的那个按代码:

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

但它不起作用，最后一个 child 有边框

Answer 1

我想这是由于内联样式覆盖了样式表 CSS。尝试将“常规”规则从内联移动到样式表，如下所示:

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

和 CSS:

ul li.pre-course {
  border-bottom: 1px solid #eee;
}
ul li.pre-course:last-child {
  border-bottom:none;
}

这样 :last-child 将覆盖常规的 CSS 规则