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，我试图通过代码ul li.pre-course:last-child { border-bottom:none; }删除最后一个孩子的代码：

public static final String RELEASE_DATE = "<???>";

但它没有用，最后一个孩子有边框

Answer 1

我认为由于内联样式会覆盖样式表CSS。尝试移动＆＃34;常规＆＃34;从内联到样式表的规则，如下所示：

<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规则

Answer 2

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

Answer 3

在线css的优先级更高

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

试试这个css

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

Css：最后一个孩子在Laravel @foreach上使用

3 个答案: