Question

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

一切都很好，除了有些场景需要隐藏第一个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会将圆角应用于隐藏的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类的元素。

CSS First Child Select，特殊课程遗漏

2 个答案: