IE8 で :nth-child と :before を使用して要素をスタイル設定する方法は?

IE8 の :nth-child および :before のブラウザ互換性制限

Internet Explorer 8 (IE8) では、独自の課題が発生します。 :nth-child や :before などの CSS 疑似要素を実装します。これらのセレクターは最新のブラウザーで広くサポートされていますが、IE8 では制限があります。

このような問題の 1 つは、:nth-child を使用してリスト内の特定の要素のスタイルを設定するときに発生します。 CSS スニペットで示されているように、セレクター #nav-primary ul li:nth-child(1) a:after は、最初のリスト項目のアンカー タグの after 疑似要素にスタイルを適用します。ただし、このセレクターは IE8 では正しく機能しません。

隣接兄弟コンビネータを使用した代替アプローチ

この制限を回避するには、隣接兄弟コンビネータ ( ) を使用できます。最初の子の擬似クラスを使用します。このアプローチは、次の CSS 構造を使用して最初の子の後続の兄弟をターゲットにすることで、同じ結果を効果的に達成します。

#nav-primary ul li:first-child a { ... }
#nav-primary ul li:first-child + li a { ... }
#nav-primary ul li:first-child + li + li a { ... }

このメソッドは、:nth-child(1)、:nth-child( 2）など。ただし、:nth-child(odd) や :nth-child(4n 3) のような、:nth-child() のより複雑なバリエーションをサポートしていないという欠点があります。

以上がIE8 で :nth-child と :before を使用して要素をスタイル設定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。