如何使用 CSS3 选择器忽略 IE8？

Question

在下面的示例中，我希望 IE8 显示 red 中的文本，但对于所有现代浏览器 green。

我知道 IE8 不理解像 :nth-child() 这样的选择器，所以我想出了 p:nth-child(odd), p:nth-child(even) {...} 来覆盖以前的样式。

有没有更优雅的方法呢？我知道条件注释 ...[if lte IE 8]... 存在，但这不是我在这个问题中要问的。

p {
  color: red;
}

p:nth-child(odd),
p:nth-child(even) {
  color: green;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

Answer 1

您可以像 http://selectivizr.com/ 一样使用这个库来为 IE 提供更新的选择器。

Answer 2

使用 :nth-child 定位浏览器是个坏主意。

特别是如果该选择器应用于动态集合，当您这样做时 container.removeNode(child) 浏览器将被迫扫描所有同级并重新计算它们使用的样式。仅仅因为您需要针对 IE8，您的文档在所有其他浏览器中都会变得更重。

我建议将 class 添加到主体元素（在服务器上或通过 JS），比如 .ie8，并在选择器中使用它：

p {
  color: green;
}

.ie8 p {
  color: red;
}

Answer 3

CSS hacks 可能并不优雅，尽管他们仍然可以完成工作。

有一些 CSS 的 IE8 hack，阅读更多：http://browserhacks.com/

这是一个，使用 @media [=17=]screen { ... }

p {
  color: green;
}

@media [=10=]screen {
  p {
    color: red;
  }
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

另一个使用selector { property: value; }

p {
  color: green;
  color: red;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

如果你更喜欢脚本，一个小的 JS hack 是另一个
var isIE8 = document.all && !document.addEventListener;

/*Set html class if IE8*/
(function(d) {
  if (document.all && !document.addEventListener) {
    d.className += ' isIE8';
  }
})(document.documentElement);

p {
  color: green;
}

.isIE8 p {
  color: red;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

Answer 4

您可以将 :nth-child(odd), :nth-child(even) 压缩为 :nth-child(n)，这是对除 :root:

之外的所有元素的保证匹配

p {
  color: red;
}

p:nth-child(n) {
  color: green;
}

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>

然而，IE8 选择器 hack 通常包括将 :root 添加到每个复杂选择器的开头，这具有相同的效果，甚至添加相同数量的特异性。

如何使用 CSS3 选择器忽略 IE8？

How to use CSS3 selectors to ignore IE8?

css

css-selectors

internet-explorer-8