CSS First Child Select,特殊课程遗漏

Question

我在列表的顶部和底部做圆角,每个LI都有背景颜色.由于背景颜色,整个UL的圆角不适用,并且第一个和最后一个LI仍然具有方角.

一切都很好,除了有些场景需要隐藏第一个LI,我用类名做这个,在下面的例子中我有"隐藏我".

<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就像:

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会将圆角应用于隐藏的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;
}