Question

我在另一篇文章中读到以下内容应该在ie8中起作用，作为使用nth-child的一个很好的替代方案

的CSS：

ul > li + li{
  background-color:red;
}

ul > li + li + li{
  background-color:blue;
}

ul > li + li + li + li{
  background-color:green;
}

HTML：

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

然而，我无法让它发挥作用。我在普通的html文件中尝试了完全相同的代码。并且也无法在完全开发的网站上使用它。我使用ie8开发工具来调试它，但是开发工具没有采用＆＃34; +＆＃34;选择器（显然）支持。

我尝试添加到codepen和jsfiddle以向您展示示例，但这两个工具不会在ie8中工作。

http://codepen.io/anon/pen/jEPxeb

关于我做错了什么的想法？

=====更新======

事实证明，我的代码有问题。在样本上我使用了doctype是不正确的，并且在完全开发的网站上，即只有if语句不正确。一旦我修复了这两个项目，代码就按预期工作了。感谢所有帮助我得出结论的人。

Answer 1

以下适用于Windows XP上的IE8：

ul > li:first-child {
  background-color:red;
}

ul > li:first-child + li {
  background-color:blue;
}

ul > li:first-child + li + li {
  background-color:green;
}

请确保指定doctype以使其正常工作：

<!DOCTYPE html>

请参阅http://msdn.microsoft.com/en-us/library/ie/cc848865%28v=vs.85%29.aspx

Answer 2

根据doc相邻的兄弟选择器将适用于7 ++的所有版本的Internet Explorer。

注意：

Internet Explorer 7 在安装时无法正确更新样式   element被动态放置在匹配的元素之前   选择。

在Internet Explorer 8 中，如果插入了元素   通过单击链接动态地应用第一个子样式   直到链接失去焦点。

Answer 3

在这种情况下使用jquery而不是css。然后它会像ie8一样运行所有版本的浏览器。

$('li:nth-child(1)').css('background','red');
$('li:nth-child(2)').css('background','blue');
$('li:nth-child(3)').css('background','green');

IE8 LI + LI选择器无法正常工作

3 个答案: