如何在最后一个元素之前更改元素的 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");

Answer 2

我建议改变对问题的思考：

• 为所有 a 元素设置样式
• 覆盖 :first-child 的样式
• 覆盖 :last 的样式

Answer 3

在这里扩展一些答案，您基本上有两个问题：

1. 您想要设计一些既不是第一个也不是最后一个的样式
2. 您希望它在 IE 中工作。

因此我建议采用两步法：

首先，相应地设置您的 HTML+CSS

<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>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

其次，修复IE，

<div id="breadcrumb">
  <ul>
     <li class="first-child"><a href="#">Home</a></li>
     <li><a href="#">Sports</a></li>
     <li><a href="#">Football</a></li>
     <li class="last-child"><a href="#">Leagues/a></li>
  </ul>
</div>

#breadcrumb li a { /* middle rules here */ }
#breadcrumb li:first-child a { /* first child rules here */ }
#breadcrumb li:last-child a { /* last child rules here */ }

/* IE part */
#breadcrumb li.first-child a { /* first child rules here */ }
#breadcrumb li.last-child a { /* last child rules here */ }

如果你不能在服务器上（或静态地）添加第一个子类和最后一个子类，我会使用这个 jQuery JS：

$('#breadcrumb li:first-child').addClass('first-child');
$('#breadcrumb li:last-child').addClass('last-child');

最后，我会使用条件 cmets 或某种特征检测（不确定哪种特征检测会起作用）来确保只有需要修复的浏览器才能获得第一个/最后一个修复。您可以创建一个屏幕外的 div 并查看第一个/最后一个规则是否适用。

请注意，如果您经常使用 first-child/last-child，那么 jQuery 代码可以很容易地进行调整，您可以在 DOM 中用两行添加这些类。

编辑我测试了我的解决方案，发现如果您在逗号分隔的规则列表中有 :last-child，那么 IE8 无法解析 CSS 规则，所以不幸的是，您必须为IE。但是，一旦您不再关心支持 IE8（叹息……总有一天），这会更容易删除代码库的那部分。