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

Question

On Laravel blade I'm using this code to iterate through a list which is filled by an array:

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

on this my code each <li> have border-bottom: 1px solid #eee; and i'm trying to remove that on last child with Css by code:

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

but it doesn't work and last child have border

Answer 1

I suppose that's due to the inline style overriding the stylesheet CSS. Try to move the "regular" rule from inline to the stylesheet, like this:

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

and CSS:

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

That way :last-child will overwrite the regular CSS rule