Question

我有一个类.headerRightZone的容器此容器包含类.btn的元素其中一些人有班级.hidden

目标：我需要选择（写选择器）最后一个可见（没有.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

代码中有什么问题？为什么数组是空的？

Answer 1

这里的问题是，最后一个类型的工作方式并不合适。

它只会根据元素类型进行评估，在本例中为a，它并不关心类。您编写的选择器只能影响最后一个锚标记，无论它具有哪些类。因此，当您的最后一个元素未显示时，您没有看到您的样式被设置。

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

要解决您的问题，您需要使用javascript或jQuery，因为这超出了CSS的功能。

之前已经提出了一些好的建议：here

选择器无法正常工作

1 个答案: