ホームページ >ウェブフロントエンド >CSSチュートリアル >Internet Explorer 8 で nth-child() を使用するにはどうすればよいですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-11-11 10:11:03899ブラウズ

How Can You Use nth-child() in Internet Explorer 8?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。