ブラウザ間の互換性を維持しながら、CSS で最後のリスト項目のスタイルを設定するにはどうすればよいですか?

:last-child を使用して最後のリスト項目に CSS を適用しています

最後のリスト項目のみをスタイルしようとしています (

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}

ただし、このアプローチは最後のリスト項目の選択に失敗します。この問題は、:last-child 疑似クラスに対するブラウザのサポートが制限されていることが原因です。

ブラウザの互換性に関する懸念

最新のブラウザで広く使用されているにもかかわらず、:last-child はサポートされていません。広く支持されています。 Internet Explorer 9 より前のバージョンと Safari の 3.2 より前のバージョンは、特にこれをサポートしていません。

代替解決策

この互換性の問題に対処するには、 last-child または同様のクラスを目的のリスト項目に追加し、代わりにスタイルを li.last-child に適用します。この方法により、さまざまなブラウザ間での互換性が保証されます:

ul#nav li.last-child {
    border-bottom: 1px solid #b5b5b5;
}

以上がブラウザ間の互換性を維持しながら、CSS で最後のリスト項目のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。