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>隣接は次の要素を参照し、前の要素とは関係ありません。
次のセクション