同じタイプの最後の要素の CSS スタイルを選択するための last-of-type 疑似クラス セレクターの使用方法

同じ型の要素の中から最後の CSS スタイルを選択するための last-of-type 擬似クラス セレクターの使用方法

CSS は、記述に使用されるスタイルです。 Web ページのマークアップ言語、CSS スタイル シートを通じて、HTML ドキュメント内の要素にさまざまなスタイルを追加できます。その中でも、セレクターは CSS スタイル シートの最も重要な部分であり、スタイルを設定する必要がある要素を選択するために使用されます。この記事では、同じ型の最後の要素を選択できる last-of-type 擬似クラス セレクターを紹介し、具体的なコード例を示します。

:last-of-type 疑似クラス セレクターは、同じ型の要素の中から最後の要素を選択するために使用されます。ここでの「タイプ」とは、要素のタグ名を指します。たとえば、複数の <p></p> 要素を含むページでは、:last-of-type 擬似クラス セレクターを使用して最後の <p></p> 要素を選択できます。特定のスタイルを適用します。

ここでは、:last-of-type 疑似クラス セレクターを使用した具体的なコード例をいくつか示します。

/* 选择同类型元素中最后一个 <p> 元素，并将背景颜色设置为红色 */
p:last-of-type {
    background-color: red;
}

/* 选择同类型元素中最后一个 <div> 元素，并将边框宽度设置为3px */
div:last-of-type {
    border-width: 3px;
}

/* 选择同类型元素中最后一个 <h1> 元素，并将字体颜色设置为蓝色 */
h1:last-of-type {
    color: blue;
}

/* 选择同类型元素中最后一个 <li> 元素，并将文字大小设置为20px */
li:last-of-type {
    font-size: 20px;
}

上記のコード例では、:last-of-type # を使用しました。 ## 同じタイプの要素の中から最後の要素を選択し、それらに異なるスタイルを適用する疑似クラス セレクター。特定のニーズに応じてこれらのスタイルを自由に調整できます。

:last-of-typepseudo-class セレクターは、同じ型の最後の要素のみを選択できますが、同じ型の最後から 2 番目の要素は選択できないことに注意してください。 . 1 番目、3 番目など。最後から 2 番目の要素または別の要素を選択する必要がある場合は、:nth-last-of-type() 疑似クラス セレクターを使用できます。

要約すると、

:last-of-type擬似クラス セレクターは、同じ型の最後の要素に特定のスタイルを適用するのに役立ちます。このセレクターを柔軟に使用することで、Web ページのスタイルをより簡単にカスタマイズできます。この記事が、:last-of-type 疑似クラス セレクターの理解と使用に役立つことを願っています。

以上が同じタイプの最後の要素の CSS スタイルを選択するための last-of-type 疑似クラス セレクターの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。