:last-child セレクターが機能しないのはなぜですか?

:last-child について

CSS セレクター :last-child は、親の最後の子要素をターゲットにするように設計されています。指定されたコード サンプルでは、​​「完全」クラスの要素にセレクターを適用しています。ただし、親要素にセレクターの対象ではない追加の要素が含まれている場合に問題が発生します。

問題

提供された HTML では、

「完全」クラスの要素は、親

の最後の要素ではありません。要素。これは、:last-child セレクターが適用されないことを意味します。

代替解決策

この問題を解決するには、代替セレクターを試すことができます:

• :last-of-type: このセレクターは、親内の特定の型。この場合、最後の
• が選択されます。
• jQuery $("li.complete").last();": この jQuery 式は、"li.complete" クラスに一致する最後の要素を選択します。 「complete」セレクター。同じクラスの要素が複数ある場合に、目的の要素をターゲットにする効果的な方法です。

動作

:last-child は、親コンテナーの最後の要素でない場合、つまり、ターゲットの要素の後に他の要素がある場合、要素を選択しないことを覚えておくことが重要です。この動作は、要素内での位置に関係なく、特定の型の最後の要素を対象とする :last-of-type とは異なります。 parent.

結論

:last-child を使用する場合は、ターゲットの要素が親コンテナーの最後の子であることを確認してください。そうでない場合は、代替セレクターの使用を検討してください。 :last-of-type や jQuery 式などを使用して、目的の結果を実現します。

以上が:last-child セレクターが機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。