ホームページ > 記事 > ウェブフロントエンド > :nth-of-type(2) 擬似クラス セレクターを使用して、同じ型の 2 番目の要素のスタイルを選択します。
:nth-of-type(2) 擬似クラス セレクターを使用して、同じ型の 2 番目の要素のスタイルを選択します。
- WBOYオリジナル
- 2023-11-20 12:56:15781ブラウズ
タイトル: :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 サイトの他の関連記事を参照してください。