なんでもかんでも全部

*{
    width:200px;
}

指定したタグで

hoge{
    width:200px;
}

指定した要素の中で指定した属性を持っているもののみ

hoge[piyo]{
    width:200px;
}

hogeが指定する要素中でpiyo属性をもっているもの

指定した要素の中で指定した属性が指定した値のもののみ

hoge[piyo="ぴよ"]{
    width:200px;
}

hogeが指定する要素中でpiyo属性が「ぴよ」なもののみ

指定した要素の中で指定した属性が指定した値が含まれているもの ※属性には複数パラメータもつものがある

hoge[piyo~="ぴよ"]{
    width:200px;
}

hogeが指定する要素中でpiyo属性が「ぴよ」を含む

<p id="hoge">aaa</p>

頭に♯をつけて書く

#hoge{
    color:#FF0000;
}

<p class="hoge">aaa</p>

頭に.(ドット)をつけて書く

.hoge{
    color:#FF0000;
}

実はこのクラスセレクタ、続けて書くとand条件として結合できる。class名はマークアップ的には修飾にあたるので、こいつを活用すると非常に切り分けがうまく書ける。

<p class="hoge piyo">aaa</p>

連続で書く

.hoge.piyo{
    color:#FF0000;
}

hoge クラス piyo クラス 両方のクラスが付与されている要素を指定ということになる。

コンマで区切る

hoge,moge{
    width:100px;
}

これでhogeが指す要素とmogeが指す要素に対してスタイル指定。 このセレクタの結合強度は弱く扱いとしては正規表現の「|」と同じで一番最後に評価される。 なので、これは

#hoge th,td{
  color:#FFF;
}

これと同じになる

#hoge th{
  color:#FFF;
}
td{
  color:#FFF;
}

スペースで区切る

hoge moge{
    width:100px;
}

hogeが指定する要素中のmogeが指定する要素全部、直下だけじゃなくて全部

チルダで区切る

hoge~moge{
    width:100px;
}

hogeが指定する要素のと同階層の要素でmogeが指定する要素以降にあるもの全部

hoge+moge{
    width:100px;
}

hogeが指定する要素のと同階層の要素でmogeが指定する要素直後にあるもの1個

2019-12-20 現在そういうセレクタは無い。

hoge>moge{
    width:100px;
}

hogeが指定する要素の1個下の階層の要素でmogeが指定する要素全部

hoge タグ配下の moge タグの要素で piyo クラスを持ってないモノ

hoge moge:not(.piyo){
    width:100px;
}