CSS First Child Select，特殊类省略答案

【问题标题】：CSS First Child Select, with special class omissionCSS First Child Select，特殊类省略
【发布时间】：2012-12-07 10:52:50
【问题描述】：

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

一切都很好，除了有些场景需要隐藏第一个 LI，我使用类名来执行此操作，在下面的示例中我有“hide-me”。

<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 应用圆角？

【问题讨论】：

看起来很棘手，有什么反对只在第二个项目上设置一个类（第一个 li 不隐藏）？不应该太难，将第一项设置为隐藏时，使用 jQuery（或 .net/php）将类添加到下一项。在 CSS3 中有 :nth-child(2) 伪选择器，但还没有在所有地方都得到完全支持（又名 IE :)。
他们为什么不创建一个 :first-matching 伪选择器？似乎大多数伪选择器仅在您不将其他类应用于元素时才有用。
您是否尝试过将边界半径放在无序列表上并使用溢出：隐藏；？
溢出：隐藏技巧不起作用。这可能是因为我实际上使用的是背景渐变，而不仅仅是我在快速示例中使用的纯色。
@animuson：他们现在正在开发:nth-match() pseudo-class，所以理论上可以使用li:not(.hide_me):nth-match(1)。但是，是的，他们应该在很久以前就想出来了……

标签： html css css-selectors

【解决方案1】：

试试这个：

李：第一个孩子， li.hide-me:first-child + li { 边框左上角半径：8px；边框右上角半径：8px； }

另外，是否会简单地使用这项工作？

ul { 边框半径：8px；溢出：隐藏； }

【讨论】：

我尝试了溢出：隐藏技巧，但它不起作用。但是相邻元素的想法很好，谢谢。
但是，如果在第一个非隐藏元素之前有多个隐藏元素，这将不起作用。

【解决方案2】：

您可以将第一个选择器更改为li:first-child, .hide-me:first-child + li。

因此，如果它是li，则选择第一个子元素，或者如果它是第一个子元素，则选择前面带有.hide-me 类的元素的li。

【讨论】：