css - CSS 和 Internet Explorer 中的 :last-child 伪类选择器

Question

我有以下代码：

ul.myList li{
     border-right: 1px dotted #000;
}

但是，在最后一个元素上，我需要删除该边框，因为我正在使用的设计表明最后一项不需要边框作为分隔符。

所以，我需要定位列表的最后一个孩子，所以在我的 css 中我添加了

ul.myList li:last-child{
     border-right: none;
}

众所周知，它在 Firefox、Safari 和 Chrome 中运行良好。

当我们在 Internet Explorer 6 到 8 中查看页面时，问题就出现了。

score 11 · Accepted Answer

所以，经过一番挖掘，我找到了答案：

如果浏览器是 IE<8，请指定如下样式表：

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

并在您的 IE 样式表中指定以下规则：

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

该nextSibling表达式查看其后是否有元素，是否继承了默认样式表中指定的规则，如果没有则应用新规则。

更多信息可以在这里找到

score 2 · Accepted Answer

IE8< 不支持这个伪选择器。查看MSDN 文章以了解所有支持的功能 :)

你可以看看这个在 IE 中启用伪选择器的jQuery 解决方案，或者在 IE 中保持原样。

score 2 · Accepted Answer

由于版本 9 之前的 Internet Explorer（仍在开发中）根本不支持:last-child选择器，不幸的是，我最好的解决方案是在列表中的最后一个元素上设置一个类或 id 并尝试选择它。

当然，如果为 IE 保留右边框不会完全破坏布局，您可能希望保留代码原样，如果您不介意 IE 稍微搞砸渲染。

score 1 · Accepted Answer

您可以使用 jQuery 来做到这一点。所以不要依赖CSS。使用 jQuery 选择器设置最后一个元素的属性。我知道你没有用它标记你的问题。

jQuery('ul.myList li:last-child').css("Key","value");

4 回答 4