Question

我有3 <a>个标签，我想在IE8中找到最后一个孩子。不幸的是，IE8不支持:last-child。

#breadcrumbs li:first-child div a {
  background: none !important;
  color: red !important;
}

顶级css到达第一个<a>，但我需要尝试进入第三个，我尝试使用下面的代码，但它不起作用。

#breadcrumbs li:first-child div a + li div a + li div a {
  background: none !important;
  color: red !important;
}


<ul id="breadcrumbs">
   <li><div><a>dfgdfg</a></div></li>
   <li><div><a>fdgdfgdf</a></div></li>
   <li><div><a>fdgdfgfd</a></div></li>
   <li><div><a>dgfdgdfg</a></div></li>
</ul>

Answer 1

我猜，有点，但我建议：

#breadcrumbs li + li + li + li div a {
    /* css here */
}

JS Fiddle demo

当然，您可以简单地将类名应用于li或a元素，然后根据该类名称对元素进行样式设置。如果JavaScript可用，那么您当然可以使用JavaScript在必要时添加类：

var list = document.getElementById('breadcrumbs'),
    aElems = list.getElementsByTagName('a'),
    lastA = aElems[aElems.length - 1];
lastA.className = 'last';

JS Fiddle demo

Answer 2

ie9.js将使IE8及以下版本达到最新规格。包括这一点应该允许使用像:last-child

这样的伪选择器

只需将其包含在您的网页上即可：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Answer 3

与jQuery结合使用这是一个很好的黑客。

   /* Load this in your DOM */
   function last_child() {
      if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
        $('*:last-child').addClass('last-child');
      }
    }

只需加入你的风格

li:last_child, li.last_child {

}

示例：http://jsfiddle.net/2dcsH/

如何到达最后一个孩子

3 个答案: