jquery - 如何更改最后一个元素之前的 CSS？

Question

如果可能的话，我喜欢获得最干净的代码，所以要么通过常规 CSS 要么通过 jQuery。它必须是跨浏览器的并且可以在 IE 中工作。

标记是面包屑。

<div id="breadcrumb">
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li><a href="#">Leagues/a></li>
  </ul>
</div>

所以，我想通过 3 个步骤来设计这个面包屑的样式。

• 第一个一个项目
• 之间 a 项(因此不是第一个也不是最后一个)
• 最后项目

我无法使用常规 CSS 来解决这个问题，因为 IE 不支持伪类，如 :first-child 等。

所以我尝试了 jQuery 并使用以下方法取得了一些成功:

$("#breadcrumb li:last > a").addClass("last");

但我不知道如何定位中间的那些，因为如果我将所有 #breadcrumb li > a 的样式设置为“middle”类，那么使用 .addClass 将不再起作用。

有什么建议吗？

Answer 1

您可以使用:not()与 :first和 :last ，像这样:

$("#breadcrumb li:first > a").addClass("first");
$("#breadcrumb li:not(:first,:last) > a").addClass("middle");
$("#breadcrumb li:last > a").addClass("last");