选择不能正常工作

问题描述：

我有容器.headerRightZone类这个容器与.btn类他们中的一些元素具有类.hidden选择不能正常工作

目标：我需要选择（写入选择器）最后一个可见（按钮没有。隐藏类）按钮

myhtml.html

<div class="headerRightZone"> 
    <a href="javascript: void(0)" class="btn">Button 1</a> 
    <a href="javascript: void(0)" class="btn">Button 2</a> 
    <a href="javascript: void(0)" class="btn">Button 3</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 4</a> 
    <a href="javascript: void(0)" class="btn hidden">Button 5</a> 
</div>

mycss.css

.hidden{ 
    display: none; 
} 

.btn{ 
    background-color: #fff; 
} 

.headerRightZone .btn:not(.hidden):last-of-type{ 
    background-color: #f00; 
}

我写道：

.headerRightZone .btn:not(.hidden):last-of-type

但它返回一个空数组。

附jsFiddle Example

什么是错的代码？为什么数组是空的？

“它返回一个空数组” - 听起来这不是CSS而是替代的JavaScript。你能提供你在这里使用的代码吗？ –

附jsFiddle示例。我希望第三个锚点应该是红色背景 –

，如果你确定你想要第三个锚点按钮是红色的，你可以选择第n个孩子（3）我只是更新你的jsfiddle https://jsfiddle.net/icenova/po3fcuo6/1/ – Anami

答

这里的问题是，最后一个类型不工作，你如何期待它。

它只会根据元素类型进行评估，在本例中为a，它并不关心类。不管它有什么类，你写的选择器只能影响最后一个锚标签。所以当你的最后一个元素没有显示时，你没有看到你的样式被设置。

隐藏不同的元素说明了这一点：updated fiddle

解决你的问题，你将需要使用JavaScript或jQuery的，因为这已经超出CSS的能力。

一些很好的建议已经做出之前：here

选择不能正常工作

相关推荐