:nth-of-type(2) 擬似クラスセレクターを使用して、同じ型の 2 番目の要素のスタイルを選択します。-CSSチュートリアル-php.cn

:nth-of-type(2) 擬似クラスセレクターを使用して、同じ型の 2 番目の要素のスタイルを選択します。

WBOY

リリース： 2023-11-20 12:56:15

オリジナル

779 人が閲覧しました

:nth-of-type(2) 擬似クラスセレクターを使用して、同じ型の 2 番目の要素のスタイルを選択します。

タイトル: :nth-of-type(2) 擬似クラスセレクターを使用して、同じタイプの 2 番目の要素のスタイルを選択します

Web 開発の場合, 特定の要素にスタイルを追加する必要があることがよくあります。スタイルを追加するには、すべて同じタイプの要素ではなく、同じタイプの要素の中から特定の要素を選択する必要がある場合があります。この場合、CSS の擬似クラスセレクター nth-of-type(2) を使用して、同じ型の 2 番目の要素を選択し、それにスタイル効果を追加できます。

疑似クラスセレクターは、特定の条件を満たす要素を選択するために使用される特別な CSS セレクターです。このうち、:nth-of-type(2) 擬似クラスセレクターは、同じ型の要素の中から 2 番目の要素を選択することを意味します。その使用法は次のとおりです。

/* 选择同类型元素中的第二个元素 */
选择器:nth-of-type(2) {
    属性: 值;
}

ログイン後にコピー

以下は、:nth-of-type(2) 疑似クラスセレクターを使用して、同じタイプの要素の 2 番目の要素を選択する方法を示す具体的なコード例です。 :

<!DOCTYPE html>
<html>
<head>
    <style>
    /* 选择同类型元素中的第二个元素 */
    ul li:nth-of-type(2) {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里将被选中，因为是同类型元素中的第二个元素 -->
        <li>第三个元素</li>
    </ul>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里不会被选中，因为是同类型元素中的第一个元素 -->
    </ul>
</body>
</html>

ログイン後にコピー

上記のコード例では、ul li:nth-of-type(2) セレクターを通じて同じ型要素 ul 内の 2 番目の li 要素を選択し、その背景色を黄色に設定しました。こうすることで、同じタイプの 2 番目の要素のスタイルが他の要素とは異なります。

:nth-of-type(2) は CSS3 の新しい属性であるため、使用する場合はさまざまなブラウザーと互換性がある必要があることに注意してください。適切なブラウザベンダープレフィックスを追加することで互換性を実現できます。

要約すると、:nth-of-type(2) 擬似クラスセレクターを使用すると、同じタイプの要素の 2 番目の要素を選択し、それにスタイルを追加できます。この機能は Web 開発において非常に便利で、ページ上の要素のスタイルをより正確に制御できるようになります。この機能を柔軟に使用して、実際のニーズに応じてさまざまなスタイル効果を実現できます。

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