CSS リストの最後の子要素を確実にスタイル設定するにはどうすればよいですか?

CSS で最後の子をターゲットにする

リスト内の最後の要素をスタイル設定するタスクは、場合によっては困難な場合があります。次の CSS ルールを考えてみましょう:

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

残念ながら、これは本来の目的を達成できません。その理由を理解するには、:last-child 疑似クラスのブラウザ サポートを調べる必要があります。

ブラウザ サポートの制限

CSS3 標準であるにもかかわらず、:last-child pseudoclass は、一部のブラウザでは依然として制限に直面しています。特に、Internet Explorer バージョン 9 より前のバージョンと Safari バージョン 3.2 より前のバージョンでは、このセレクタがサポートされていません。

Internet Explorer 7 や Safari 3.2 など、:last-child をサポートするブラウザであっても、次の点に注意することが重要です。これに対応する :first-child は、これらのブラウザでより広くサポートされています。

代替解決策

これらの制限を克服し、最後の子を確実にターゲットにするには、「last-child」などの一意のクラスを最後のリスト項目に明示的に追加し、そのクラスに特別にスタイルを適用することをお勧めします。 :

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

このアプローチは、幅広いブラウザーにわたって一貫性と信頼性の高いスタイルを提供します。

以上がCSS リストの最後の子要素を確実にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。