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

所以，我想分三步来设计这个面包屑的样式。

• 第一个 a 项
• 中间 a 项（所以不是第一个也不是最后一个）
• 最后一个 a 项目

我无法使用常规 CSS 计算出来，因为 IE 不支持像 :first-child 等伪类。

取得了一些成功：

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

所以我尝试了 jQuery 并使用以下方法 无法弄清楚如何定位介于两者之间的那些，因为如果我将所有样式设置为 #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');

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

请注意，如果您经常使用first-child/last-child，则可以轻松调整 jQuery 代码，您可以用两行将这些类添加到整个 DOM 中。

编辑 我测试了我的解决方案，发现如果您在逗号分隔的规则列表中包含 :last-child ，则 IE8 无法解析 CSS 规则，因此不幸的是您必须复制 IE 的规则。然而，一旦您不再关心支持 IE8（叹息......有一天），这使得删除那部分代码库变得更容易。