html - IE8 LI + LI 选择器不工作

标签 html css internet-explorer-8

我读了另一篇文章说以下应该在 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 开发工具对其进行调试,但开发工具没有选择(显然)支持的“+”选择器。

我尝试添加到 codepen 和 jsfiddle 来向您展示示例,但这两个工具在 ie8 中不起作用。

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

关于我做错了什么有什么想法吗?

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

事实证明,我的代码有问题。在我使用的示例中,doctype 不正确,而在完全开发的网站上,ie only if 语句不正确。一旦我修复了这两个元素,代码就会按预期工作。感谢所有帮助我得出这个结论的人。

最佳答案

以下适用于 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 html>

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

关于html - IE8 LI + LI 选择器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27158410/

相关文章:

html - 使用 CSS 将按钮内容移动到 Bootstrap 选项卡的右上角

php - 使用 PHP 递归搜索目录中的文件并更改值

javascript - 使用 jquery 1.7 同步 POST

css - 针对IE7和IE7标准的IE9调试网站

html - Chrome 错误 : css positioning incorrectly resizing container

html - float :left div with a paragraph/text on the right

javascript - 失去悬停后没有鼠标

php - 使用javascript将单词数组与文本区域输入进行比较

javascript - 投资组合模态,自动向左填充 17px

php - 为什么这个 js-php 生成的位置引用在 IE8 中不起作用?