CSSセレクタにはいくつか種類がありますので、すべてはかけませんが、代表的なものをかいつまんでご紹介します。

クラス、IDによるセレクタ

通常のセレクタの記述方法です。クラスは「.（ドット、ピリオド）」、IDは「#（シャープ）」を頭文字とすることでセレクトできます。

// IDでセレクト
#site-header{
  width:100%
}

// クラス名でセレクト
.grid-container{
  margin:0 -1% 30px;
}

IDは、ページ内に同じIDが存在すると衝突してしまい、ただしく動作しなくなってしまいます。一方で、クラスは、複数の要素に同じクラスを割り振る事ができますので、同じスタイルを複数の要素に割り当てたい時に便利です。

上記の理由から、一般的に、クラスでセレクトすることの方が多いです。クラスとIDは、役割が似ていますが、これはHTMLの内部構造的な、かつ歴史的な問題ですので深く考える必要はないです。

セレクタのグルーピング：カンマ

「, （カンマ）」を使うことで、グルーピングができます。

// すべてのセレクタに同じスタイルを指定
h1, h2, h3 {
  font-weight:bold
}

子孫セレクタ: スペース

// 子孫であるクラスだけを選択
.section-wrapper h1 {
  font-size:24px;
}

子供セレクタ：>（不等号）

// 直接の子孫であるクラスだけを選択
.section-wrapper > h1 {
  font-size:24px;
}

隣接セレクタ：+（プラス）

「その後にすぐ続く」という条件になります。セレクトされるのは最後要素です。

// すぐ直後にくるPを選択
.section-wrapper p + p {
  margin-top:10px
}

疑似クラス：nth-child

１〜nの数字で、n番目の子供をセレクトできます。

// n番目の子供
.section-wrapper p:nth-child(2) {
  margin-top:10px
}

疑似クラス：first-child, last-child

最後の子供をセレクトできます。

// n番目の子供
.section-wrapper p:last-child{
  margin-top:0
}

否定クラス：not

一致するクラスを除外してセレクトできます。

// .no-padding以外に適応
.section-wrapper p:not(.no-padding){
  padding:10px 0;
}

疑似要素：before, after

擬似的に要素を挿入できます。デフォルトではインライン要素であることに注意して下さい。また、contentで文字を挿入しないと、何も挿入されません。空文字でも構いません。

// 疑似要素を挿入
.section-wrapper p:before{
  content:'';
  display:block;
  width:10px;
  height:10px;
  float:left;
}

最初の文字：first-letter

最初の文字だけに適応します。

最初の行：first-line

最初の行だけに適応します。