Internet Explorer 8 で nth-child() を使用するにはどうすればよいですか?

Internet Explorer 8 の nth-child() CSS サポートの欠如を克服する

CSS では、nth-child() 要素セレクターを使用して、親要素内の特定の子要素をターゲットにします。ただし、このセレクターは Internet Explorer 8 (IE8) ではサポートされていません。これは、表でゼブラストライプのような効果を実現したい場合には困難になる可能性があります。

解決策

この問題を解決するには、主に 2 つのアプローチがあります。

1. Polyfill を使用する

Polyfill は、ブラウザに不足している機能を追加するスクリプトです。 CSS の場合、Selectivizr は、IE8 の nth-child() をサポートする一般的なポリフィルです。

2. First-child を使用した IE8 のトリック

IE8 は first-child セレクターをサポートしているため、それを使用して nth-child() の回避策を作成できます:

/* li:nth-child(2) */
li:first-child + li { /* Works for IE8 */ }

このメソッドIE8 を騙して 2 番目の子要素を選択させます。ただし、これには制限があり、nth-child(2n 1) や nth-child(odd) のようなより複雑な nth-child() セレクターをエミュレートすることはできません。

以上がInternet Explorer 8 で nth-child() を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。