CSSセレクタ基本

A > B（子セレクタの指定）

divタグの内容

divタグの子要素のspanタグの内容

divタグの孫要素のspanタグの内容

spanタグの内容

<div>divタグの内容</div>
<div>
    <span>divタグの子要素のspanタグの内容</span>
    <div><p><span>divタグの孫要素のspanタグの内容</span></p></div>
</div>
<span>spanタグの内容</span>

div > span {
	color: red;
}

セレクタの次に「>」を入れセレクタを指定することで、指定の親要素内の一階層下の子要素に装飾が適用されます。
divタグの一階層下にあるspanタグにのみ装飾が適用されます。

A + B（隣接セレクタの指定）

pタグの内容

divタグの内容

divタグに隣接したpタグの内容

pタグに隣接したpタグの内容

<p>pタグの内容</p>
<div>divタグの内容</div>
<p>divタグに隣接したpタグの内容</p>
<p>pタグに隣接したpタグの内容</p>

div + p {
	color: red;
}

セレクタの次に「+」を入れセレクタを指定することで、指定の要素に隣接した要素に装飾が適用されます。
divタグの直後にあるpタグに装飾が適用されます。

A ~ B（要素の後ろにある同じ階層のセレクタの指定）

divタグより前にあるpタグの内容

divタグの内容

divタグより後にあるpタグの内容

divタグの子要素のpタグの内容

divタグより後にあるpタグの内容

<p>divタグより前にあるpタグの内容</p>
<div>divタグの内容</div>
<p>divタグより後にあるpタグの内容</p>
<p>divタグより後にあるpタグの内容</p>
<div><p>divタグの子要素のpタグの内容</p></div>
<p>divタグより後にあるpタグの内容</p>

div ~ p {
	color: red;
}

セレクタの次に「~」を入れセレクタを指定することで、指定の要素の後にある同じ階層の要素に装飾が適用されます。
divタグの以降にあるすべてのpタグに装飾が適用されます。ただし階層が違うと適用されません。