`:last-child` が常に特定の型の最後の要素を選択しないのはなぜですか?-CSSチュートリアル-php.cn

`:last-child` が常に特定の型の最後の要素を選択しないのはなぜですか?

Susan Sarandon

リリース： 2024-12-10 01:37:13

オリジナル

910 人が閲覧しました

Why Doesn't `:last-child` Always Select the Last Element of a Specific Type?

:last-child 期待どおりに動作しない: ニュアンスを理解する

CSS では、:last-child セレクターは次のことを目的としています。特定の親内の最後の子要素をターゲットにします。ただし、指定された例で強調されているように、このセレクターは、ターゲット要素の先に他の要素が存在する場合、予期しない動作をする可能性があります。

:last-child セレクターは、要素が絶対的な最後の要素である場合にのみ要素に適用されます。親コンテナ内で。これは、要素が特定のクラスまたは型の最後の要素であっても、その後に一致しない要素がある場合、:last-child はその要素を選択しないことを意味します。

この動作を説明するには、次の点を考慮してください。 HTML と CSS:

<ul>
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

ログイン後にコピー

li.complete:last-child {
    background-color: yellow;
}

ログイン後にコピー

このシナリオでは、:last-child セレクターは最後の

には適用されません。これは