:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。-CSSチュートリアル-php.cn

:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。

WBOY

リリース： 2023-11-20 11:22:47

オリジナル

1772 人が閲覧しました

:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。

:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。特定のコード例が必要です。

CSS 内、疑似クラスクラスセレクターは、ドキュメントツリー内の特定の要素を選択するために使用できる非常に強力なツールです。そのうちの 1 つは、:nth-last-child(2) 擬似クラスセレクターで、最後から 2 番目の子要素を選択し、それにスタイルを適用します。

まず、この疑似クラスセレクターを使用できるように、サンプル HTML ドキュメントを作成しましょう。簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
  <style>
    ul li:nth-last-child(2) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>第五个元素</li>
    <li>第六个元素</li>
  </ul>
</body>
</html>

ログイン後にコピー

上の例では、順序なしリスト (ul) を作成し、複数のリスト項目 (li) を含んでいます。 CSS の :nth-last-child(2) 疑似クラスセレクターを使用して、最後から 2 番目のリスト項目にスタイルを選択して適用します。この例では、最後から 2 番目のリスト項目のフォントの色を赤に設定します。

このサンプルドキュメントをブラウザで開くと、5 番目のリスト項目は最後から 2 番目のリスト項目であるため、そのフォントの色が赤に変わることがわかります。

:nth-last-child(2) 擬似クラスセレクターを使用すると、Web ページを作成するときに、最後から 2 番目の子要素にスタイルを簡単に選択して適用できます。ナビゲーションメニューで 2 番目に重要なオプションを強調表示する場合でも、リストで最後から 2 番目の項目を強調表示する場合でも、この疑似セレクターは非常に役立ちます。

このため、CSS の疑似クラスセレクターをマスターすることが非常に重要であり、レイアウトとスタイルの柔軟性を高めることができます。この簡単な例が、:nth-last-child(2) 疑似クラスセレクターの理解を深め、使用するのに役立つことを願っています。

以上が:nth-last-child(2) 擬似クラスセレクターを使用して、最後から 2 番目の子要素のスタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。