html - CSS First Child Select，省略特殊类

Question

我在列表的顶部和底部做圆 Angular ，每个 LI 都有背景颜色。由于背景颜色，整个 UL 的圆 Angular 不适用，第一个和最后一个 LI 仍然有方 Angular 。

一切都很好，除了有些情况下第一个 LI 实际上需要隐藏，我用类名来做到这一点，在下面的例子中我有“隐藏我”。

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

所以在上面的代码中，我想用类“hide-me”隐藏 LI，并显示 LI B、C、D。所以 LI B 会在左上角和右上角进行舍入，而 LI D 会在左下角和右下角进行舍入。

我使用的 CSS 是这样的:

li:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

li:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

li { background:yellow; }

.hide-me { display:none; }

但如您所见，我上面的 CSS 会将圆 Angular 应用于隐藏的 LI A。但在这种情况下，LI B 会位于列表顶部，因为 LI A 是隐藏的，但由于它不是 UL 中的第一个 child ，因此它没有圆 Angular 。

那么对于这种情况，我如何为第一个未隐藏的 LI 应用圆 Angular ？

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;}