：CSS和Internet Explorer中的last-child psuedo类选择器

问题描述

我有以下代码：

  ul.myList li {
 border-right：1px dotted＃000 ; 
} 
  

但是，在最后一个元素上，我需要删除边框作为设计

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

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

我们都知道，在Firefox，Safari和Chrome中可以正常工作。 / p>

当我们在Internet Explore 6到8查看页面时，会出现问题。

p>

解决方案

因此，经过一番挖掘，我发现了答案：

如果浏览器是IE

 <！ -  [if lt IE 8]> ; 
< link rel =stylesheethref =css / ie_all.csstype =text / css/> 
<！[endif]  - > 
  

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

  ul.myList li {
 border-right：expression（this.nextSibling == null？'none'：'inherit'）; 
} 
  

nextSibling 看看是否有后面的元素，如果有继承的默认样式表中指定的规则，如果不是它应用一个新的规则。

更多信息可以找到

I have the following code:

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.

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;
}

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

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

Any ideas?

解决方案

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

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]-->

And within your IE stylesheet specify the following rules:

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

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.

More information can be found here

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