Css: последний ребенок, использующий на 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 кодом:

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

, но это не работает, и у последнего дочернего элемента есть граница

Answer 1

Приоритет встроенного CSS выше

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

Попробуйте это CSS

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

Answer 2

Полагаю, это из-за встроенного стиля, переопределяющего таблицу стилей 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

Answer 3

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