すべてのブラウザーで CSS の最後の子要素を確実にスタイル設定するにはどうすればよいですか?

:last-child セレクターを理解する

Web ページのスタイル設定のコンテキストでは、:last-child セレクターを使用してスタイルを適用できます。具体的には、特定のコンテキスト内の最後の要素に適用されます。ただし、特定の状況ではその使用が難しいことが判明することがあります。

最後の

にスタイルを適用するシナリオを考えてみましょう。

内の要素容器。次の CSS ルールを実装します。

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

最後の

にスタイルを適用するつもりですが、要素を使用すると、失敗する可能性があります。これは、:last-child とのブラウザ間の互換性が信頼できない可能性があるためです。特に、Internet Explorer バージョン 9 未満および Safari バージョン 3.2 未満では、この疑似クラスがサポートされていません。

ブラウザーの非互換性への対処

ブラウザー間での一貫性を確保するには、以下を使用することをお勧めします。代わりに最後の子の明示的なクラス:

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

クラスを追加することによりHTML 要素に「last-child」を追加します。

<li class="last-child"><a href="#">...</a></li>

最後の

を確実にターゲットにしてスタイル設定できます。 #nav コンテナ内の要素。

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