CSS第一个孩子选择，特殊类别遗漏

问题描述：

我在列表的顶部和底部做圆角，每个LI都有一个背景颜色。由于背景颜色，整个UL的圆角不适用，并且第一个和最后一个LI仍然有方角。CSS第一个孩子选择，特殊类别遗漏

一切都很好，除了有第一个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。所以李B的左上角和右上角都会变圆，而李would的左下角和右下角会变圆。

的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将位于列表的顶部，但是因为它不是UL中的第一个孩子，所以它没有圆角。

因此，对于这种情况，我如何对未隐藏的第一个LI应用圆角？

似乎棘手，什么反对只是设置一个类的第二个项目（第一个李未隐藏）？当将第一项设置为隐藏时，应该不难，使用jQuery（或.net/php）将类添加到下一项。在CSS3中有：nth-child（2）psuedo选择器，但到处都还未完全支持（又名IE :)。 – ToddBFisher

他们为什么不创建一个：第一个匹配的伪选择器？看起来大多数伪选择器只有在你不将其他类应用到元素时才有用。 – animuson

完全同意1+ – ToddBFisher

答

尝试使用这样的：

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

我试过了溢出：隐藏的技巧，它不起作用。但是相邻元素的想法是很好的，谢谢。 – adam

但是，如果在第一个非隐藏元素之前有多个隐藏元素，则这不起作用。 – fletom

答

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

因此，如果第一个孩子是li，请选择第一个孩子，或者选择li，如果它是第一个孩子，则选择一个类别为.hide-me的元素。

CSS第一个孩子选择，特殊类别遗漏

相关推荐