● 子孫結合子 ( 空白 )

divタグの中のpタグ全て

div p {
    border: 1px solid red;
}

● 子結合子 ( ＞ )

divタグの直下のpタグ全て

div > p {
    border: 1px solid red;
}

● 隣接兄弟結合子 ( A + B )

h1タグに 隣接するpタグ

h1 + p {
    border: 1px solid red;
}

● 一般兄弟結合子 ( A ~ B )

兄に .selected を持つ 弟の div タグ

（弟のみ赤いラインで囲まれます）

<div>未選択<div>
<div class=".selected">選択ずみ<div>
<div>弟<div>
<div>弟<div>

.selected ~ div {
    border: 1px solid red;
}