CSS 組み合わせセレクター
CSS 組み合わせセレクター
CSS 組み合わせセレクター
組み合わせセレクターは、2 つのセレクター間の直接の関係を示します。
CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれています。
CSS3 には 4 つの組み合わせメソッドが含まれています:
子孫セレクター (スペースで區(qū)切られます)
子要素セレクター (不等號(hào)で區(qū)切られます)
隣接する兄弟セレクター (プラス記號(hào)で區(qū)切られます)
通常の兄弟セレクター (ダッシュで區(qū)切られます) )
子孫セレクター
子孫セレクターは、価値のある要素のすべての子孫要素と一致します。
次の例では、すべての <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> 要素內(nèi)のすべての直接の子要素 ??<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>低頭思故鄉(xiāng)</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>清明時(shí)節(jié)雨紛紛</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>遠(yuǎn)看山有色</p>
<p>近聽水無聲</p>
</div>
<p>春去花還在</p>
<p>人來鳥不驚</p>
</body>
</html>隣接は次の要素を參照し、前の要素とは関係ありません。
