我希望尽可能获得最干净的代码,所以要么通过常规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&gt; ,类为“middle”,然后使用.addClass不再有效。
有什么建议吗?
答案 0 :(得分:7)
您可以将:not()
与:first
和:last
一起使用,如下所示:
$("#breadcrumb li:first > a").addClass("first");
$("#breadcrumb li:not(:first,:last) > a").addClass("middle");
$("#breadcrumb li:last > a").addClass("last");
答案 1 :(得分:1)
我建议改变对这个问题的思考:
答案 2 :(得分:0)
为了扩展这里的一些答案,你基本上有两个问题:
因此,我建议采用两步法:
首先,相应地设置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(叹息......有一天),这样就可以更轻松地删除代码库的那一部分。