Css :last-child 在 Laravel @foreach 上使用答案

【问题标题】：Css :last-child using on Laravel @foreachCss :last-child 在 Laravel @foreach 上使用
【发布时间】：2018-05-26 11:34:37
【问题描述】：

在Laravelblade 上，我正在使用这段代码来遍历一个由数组填充的列表：

<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 的孩子：

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

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

【问题讨论】：

删除元素中的内联样式标签，并在您的 CSS 文件中设置该边框。如果您出于某种奇怪的原因不想这样做，请尝试将您的 css 更改为：border-bottom:none !important;。内联样式优先于 CSS，这是不使用它们的几个原因之一。
@MagnusEriksson 感谢问题已解决

标签： php laravel css

【解决方案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 规则

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

内联css的优先级更高

    <li class="pre-course">
        <p>
            ...
        </p>
    </li>

试试这个css

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

【讨论】：