CSSでよく使われるいくつかのセレクタ

クラスaとbの背景色はいずれも白色である
大きい記号'>'は、子要素を指します(子セレクタ)

.a>.b{
    background-color:#fff;
}

クラスaの下のクラスb要素の背景色は白色である
スペース''は子孫要素を指します(子孫セレクタ)

.a .b{
    background-color:#fff;
}

クラスaの下のすべてのクラスb要素の背景色は白です(子セレクタとは異なり、子孫セレクタはaの下のすべてのb要素を含み、子孫を含むことができます).
プラス記号'+'は隣接する要素を指します(隣接セレクタ)

.a+.b{
    background-color:#fff;
}

クラスaのすぐ下のクラスb要素の背景色は白色(すなわち、.a要素の直後に現れる.b要素を選択し、.aと、bは共通の親要素を持つ)
波号"~"指.aの後に現れるすべて.b

.a~.b{
　　background:#fff;
}

a以降のすべてb要素の背景色は白(両方の要素は同じ親要素を持つ必要がありますが、.bは.aに直接続く必要はありません)