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 项目
介于 a 项目之内（所以不是第一个而不是最后一个）
最后 a 项目

我无法使用常规CSS弄明白，因为IE不支持伪类，如：first-child等。

所以我尝试使用jQuery并取得了一些成功：

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

但是我无法弄清楚如何定位中间的那些，因为如果我设置所有 #breadcrumb li＆gt; ，类为“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

为了扩展这里的一些答案，你基本上有两个问题：

你想要设计一个不是第一个也不是最后一个的东西
您希望这可以在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 */ }

如果你不能在服务器上（或静态地）添加first-child和last-child类，我会使用这个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（叹息......有一天），这样就可以更轻松地删除代码库的那一部分。

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

3 个答案: