Question

我有一个事件列表，我希望最后一个项目与其他项目具有不同的风格。我使用：last-of-type选择器实现了这一点，它工作正常。

事件可以被过滤，所以我使用一些jQuery来显示/隐藏事件。如果隐藏了最后一个事件，则：last-of-type选择器不再起作用，因为div只是通过添加类来隐藏。

为了尝试解决这个问题，我尝试使用：not（）选择器，但是我没有得到我期望的结果。

以下是一般概念的快速模型：

$('.box').click(function(){
  $(this).addClass('hidden');
});

$('#showBoxes').click(function(){
  $('.box').removeClass('hidden');
  return false;
});

.box {
  padding: 10px;
  margin-bottom:10px;
  background-color: #f00;
}

.hidden {
  display: none;
}

.box:not(.hidden):last-of-type {
  background-color: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  My First Event
</div>
<div class="box">
  Conference 117
</div>
<div class="box">
  Christmas Party
</div>
<div class="box">
  Another Event with some more content - Click to hide!
</div>

<p><a id="showBoxes" href="">Show All Boxes</a></p>

因此，如果隐藏了最后一项，下一项如何处理css？这甚至可能是这样吗？

使用jQuery添加/删除类的CSS选择器行为

0 个答案: