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

问题描述

我有以下代码:

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

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

However, on the last element, I need to remove that border as the design that I am working from dictates that the last item does not require a border as a separator.

因此，我需要定位列表的最后一个子对象，因此在我添加的CSS中

So, I need to target the last child of a list and so within my css I have added

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

众所周知，它可以在Firefox，Safari和Chrome中正常运行.

Which as we all know, works fine in Firefox, Safari and Chrome.

问题出在我们在Internet Explore 6到8中查看页面时.

The problem lies when we view the page in Internet Explore 6 through to 8.

推荐答案

因此，经过一番挖掘，我找到了答案:

So, after some digging around, I found the answer:

如果浏览器是IE< 8，请指定这样的样式表:

If the browser is IE<8, specify a stylesheet like this:

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

并在IE样式表中指定以下规则:

And within your IE stylesheet specify the following rules:

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

nextSibling表达式看起来是在它后面是否有一个元素，是否存在继承默认样式表中指定的规则，否则，它将应用新规则.

The nextSibling expression looks to see if there is an element after it and if there is inherits the rule specified in the default stylesheet, if not it applys a new rule.

更多信息，请参见此处

这篇关于CSS和Internet Explorer中的:last-child伪类选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！