CSS3セレクタを使用してIE8を無視する方法は？

Question

以下の例では、IE8でテキストをredに表示しますが、最新のブラウザでは​​とします。

私はIE8が:nth-child()のようなセレクタを理解していないことを知っていますので、私はp:nth-child(odd), p:nth-child(even) {...}を使って元のスタイルをオーバーライドします。

これを行うにはもっとエレガントな方法がありますか？私は条件付きのコメント...[if lte IE 8]...が存在することを認識していますが、それは私がこの質問で尋ねているものではありません。あなたはIEに新しいセレクタを与えることhttp://selectivizr.com/のように、このライブラリを使用することができます

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

CSSハック彼らが、多分エレガントではありませんそれでも仕事は終わります。

IE8のためのいくつかのCSSハックがあり、で続きを読む：ここhttp://browserhacks.com/

がselector { property: value\9; }

p { 
 
    color: green; 
 
    color: red\9; 
 
}

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

を使用して別の @media \0screen { ... }

p { 
 
    color: green; 
 
} 
 

 
@media \0screen { 
 
    p { 
 
    color: red; 
 
    } 
 
}

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

を使用して、1であります210

---

小さなJSハックは別のあるスクリプトより良い
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 2

。

Answer 3

:nth-childをブラウザのターゲティングに使用することは悪い考えです。

特に、そのセレクタを動的コレクションに適用すると、container.removeNode(child)ブラウザーはすべての兄弟をスキャンして使用スタイルを再計算する必要があります。 IE8をターゲットにする必要があるため、他のすべてのブラウザでドキュメントが重くなります。

私は、body要素（サーバー上またはJSのいずれかによって）にクラスを追加することをお勧め.ie8を言うと、セレクタでそれを使用したい：

p { 
    color: green; 
} 

.ie8 p { 
    color: red; 
} 

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セレクタハックは、典型的には、同じ効果を有し、代わりに各複合セレクタの開始に:rootを加えることから成りさえ特異同量を添加します。