CSSを使用してすべての子要素を選択する方法の詳細な説明

CSS を使用してすべての子要素を再帰的に選択するにはどうすればよいですか?以下の記事では、CSS を使用してすべての子要素を再帰的に選択する方法を紹介します。お役に立てば幸いです。

要素が他の要素の子である場合、特定の親のすべての子要素を選択する子セレクターを使用して一致させることができます。子セレクターは、「>」で区切られた 2 つ以上のセレクターで構成されます。これは、要素 > 要素セレクターとも呼ばれます。

注: 子セレクターは、自身のサブクラス、つまり 2 番目のレベルの要素のみを選択できますが、2 番目のレベルより下の要素は選択できません。

文法：

指定された要素のすべての子要素を選択します

要素1 > 要素2

すべての子要素を再帰的に選択する場合は、次の構文を使用します。

要素1 > * {
    // CSS スタイル}

例1: すべての子要素を選択する

<!DOCTYPE html>
<html>
<ヘッド>
	<メタ文字セット="utf-8">
	<title>子要素セレクター</title>
	<スタイル> 
	        .demo > p{ 
	            背景色: 緑; 
	            パディング: 5px;
	        } 
	 </スタイル> 
</head> 
  
<本文> 
    <div class="demo"> 
        <p>段落 1</p> 
        <p>段落 2</p> 
        <span>段落 3</span>
        <div>段落 4</div>
    </div> 
      
    <p>段落 6</p> 
    <p>段落 7</p>
  
</html>

効果画像:

例2: すべての子要素を再帰的に選択する

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>子要素セレクター</title>
		<スタイル> 
	        .デモ > *{ 
	            背景色: 緑; 
	        } 
	    </スタイル> 
</head> 
  
<本文> 
    <div class="demo"> 
        <p>段落 1</p> 
        <p>段落 2</p> 
        <span>段落 3</span>
        <div>段落 4</div>
    </div> 
      
    <p>段落 6</p> 
    <p>段落 7</p>
  
</html>

効果画像:

CSS を使用してすべての子要素を選択する方法については、これで終わりです。CSS を使用してすべての子要素を選択する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: TypeScriptジェネリックの使用

>>: HTML初心者や初級者向けの提案。専門家は無視してかまいません。