如何在最后一个之前更改元素的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个步骤来设计这个面包屑.

• 在第 一个项目
• 该之间的 一个项目(所以不是第一次,而不是最后一个)
• 在最后 一个项目

我无法用常规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");