CSS 組み合わせセレクター

CSS 組み合わせセレクター

組み合わせセレクターは、2 つのセレクター間の直接の関係を示します。

CSS 結合セレクターには、単純なセレクターのさまざまな組み合わせが含まれます。

には、CSS3 の 4 つの組み合わせメソッドが含まれています:

子孫セレクター (スペースで区切られます)
子要素セレクター (不等号で区切られます)
隣接する兄弟セレクター (スペースで区切られます) プラス記号区切られています)
通常の兄弟セレクター (ダッシュで区切られています)

子孫セレクター

子孫セレクターは、要素のすべての子孫要素と一致します。

次の例では、すべての p 要素を選択し、それらを div 要素に挿入します。

      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>

<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

プログラムを実行して観察します

子要素セレクター

子孫セレクターと比較すると、子要素セレクター ( Childセレクターは、要素の子である要素のみを選択できます。

次の例では、<div> 要素内のすべての直接の子要素 <p> を選択します:

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>
</html>

プログラムを実行して観察します

隣接兄弟セレクター (隣接兄弟セレクター)別の要素の直後にある要素を選択でき、両方とも同じ親要素を持ちます。 別の要素の直後の要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接兄弟セレクターを使用できます。

次の例では、<div> 要素の後の最初の <p> 要素をすべて選択します:

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
div+p
{
	background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p>I will not be styled.</p>

</body>
</html>

プログラムを実行して観察します

通常の隣接兄弟セレクター

通常の兄弟セレクターは、指定された要素のすべての隣接する兄弟要素を選択します。

次の例では、すべての <div> 要素のすべての隣接する兄弟要素 <p> を選択します。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div p { background-color:yellow; } </style> </head> <body> <div> <p>段落 1。在 div 中。</p> <p>段落 2。在 div 中。</p> </div> <p>段落 3。不在 div 中。</p> <p>段落 4。不在 div 中。</p> </body> </html>

提出するリセットコード

自動運転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得