CSS First Child Select, с пропуском специального класса

Question

Я делаю закругленные углы вверху и внизу списка, и у каждого LI есть цвет фона.Из-за цвета фона закругленные углы для всего UL не применяются, а первый и последний LI по-прежнему имеют квадратные углы.

Все хорошо, кроме случаев, когда на самом деле нужен первый LI.скрытый, и я делаю это с именем класса, в приведенном ниже примере у меня есть "hide-me".

<ul>
   <li class="hide-me">A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
</ul>

Так что в коде выше я хотел бы скрыть LI с классом "hide-me "и на шоу LI B, C, D.Таким образом, LI B будет иметь округленный верхний левый и верхний правый угол, а LI D будет иметь округленный нижний левый и округленный нижний правый.

CSS, который я использую:Как вы можете видеть, мой вышеупомянутый CSS будет применять закругленные углы к скрытой LI A.Но в этом случае LI B будет в верхней части списка, потому что LI A скрыт, но, поскольку он не первый дочерний элемент в UL, у него нет закругленных углов.

Так что для этого сценария какЯ применяю закругленные углы для первого не скрытого LI?

Answer 1

Попробуйте использовать это:

li:first-child,
li.hide-me:first-child + li {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

Кроме того, просто использовать эту работу?

ul {
    border-radius: 8px;
    overflow: hidden;
}

Answer 2

Вы можете изменить первый селектор на li:first-child, .hide-me:first-child + li.

Итак, выберите первого потомка, если это li, или выберите li, которому предшествует элемент с классом .hide-meесли это первый ребенок.