css - 选择器无法正常工作

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

这里的问题是 last-of-type 并不像您期望的那样工作。

它只会根据元素类型进行评估，在本例中为 a，它不关心类。您编写的选择器只能影响最后一个 anchor 标记，无论它具有什么类。因此，由于您的最后一个元素没有显示，您没有看到正在设置的样式。

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

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

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