CSS 組み合わせセレクター

CSS 組み合わせセレクター

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

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

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

子孫セレクター (スペースで区切られます)

子要素セレクター (不等号で区切られます)

隣接する兄弟セレクター (プラス記号で区切られます)

通常の兄弟セレクター (ダッシュで区切られます) )

子孫セレクター

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div p
{
background-color:#00ff00;
}
</style>
</head>
<body>
<div>
<p>朝辞白帝彩云间</p>
<p>千里江陵一日还</p>
</div>
<p>两岸猿声啼不住</p>
<p>轻舟已过万重山</p>
</body>
</html>

子要素セレクター

子孫セレクターと比較して、子セレクター (子セレクター) は特定の要素としてのみ選択できます。要素の子要素。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div>p
{
    background-color:blue;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<div>
<h2>床前明月光</h2>
<p>疑是地上霜</p>
</div>
<div>
<span><p>举头望明月</p></span>
<p>低头思故乡</p>
</div>
</body>
</html>

隣接兄弟セレクター

隣接兄弟セレクターは、別の要素要素の直後を選択でき、両方とも同じ親要素を持ちます。

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

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

<html>
<head>
<meta charset="utf-8">  
<style>
div+p+p
{
background-color:yellow;
}
div+p
{
background-color:red;
}
</style>
</head>
<body>
<h1>清明</h1>
<div>
<h2>清明时节雨纷纷</h2>
<p>路上行人欲断魂</p>
</div>
<p>借问酒家何处有</p>
<p>牧童遥指杏花村</p>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>画</p>
</div>
<div>
<p>远看山有色</p>
<p>近听水无声</p>
</div>
<p>春去花还在</p>
<p>人来鸟不惊</p>
</body>
</html>

隣接は次の要素を参照し、前の要素とは関係ありません。

学び続ける

新しいファイル

<html> <head> <meta charset="utf-8"> <style> div+p+p { background-color:yellow; } div+p { background-color:red; } </style> </head> <body> <h1>清明</h1> <div> <h2>清明时节雨纷纷</h2> <p>路上行人欲断魂</p> </div> <p>借问酒家何处有</p> <p>牧童遥指杏花村</p> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear