CSS1で定義されたクラスセレクタは、ピリオド（.）とその直後に続くクラス名から成り立ち、クラス名と(X)HTMLのclass属性が一致した場合に適用されます。
クラスセレクタはもっとも使用頻度の高いセレクタの一つです。

クラス名などの識別子に関しては扱える文字に決まりが有ります。
詳しくは「識別子で扱える文字」を参照してください。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

クラスセレクタのサンプル

.mainArea {
  float: left;
  width: 600px;
  margin: 0 0 20px;
}

p.attention {
  color: red;
  font-size: 80%;
}

<div class="mainArea">

<p>テキスト</p>
<p class="attention">注意書き</p>

</div>

クラスセレクタを使って.mainAreaとp.attentionにスタイルを適用させています。
このp.attentionは、属性セレクタでp[class~="attention"]と指定した場合と同じ扱いになります。

クラスセレクタは以下のように同一の(X)HTML内で複数回使っても問題ありません。
また、一つの要素にclass属性の値を複数指定する事も可能です。

.menu {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.subMenu {
  margin-bottom: 20px;
}

<ul class="menu">
<li><a href="/info/">お知らせ</a></li>
</ul>

<ul class="menu subMenu">
<li><a href="/info/2009/">2009年のお知らせ一覧</a></li>
</ul>

<p>テキスト</p>

このようにmenu subMenuと指定する事で、.subMenuに指定したmargin-bottom: 20px;が.menuに指定したmargin-bottom: 10px;を上書きして適用されます。
この複数指定を上手く活用する事で、似たようなスタイルが適用されているけど部分的にスタイルを変えたいといった場合に活用できます。

他の書き方として、以下のように複数のクラスを同時に指定する事も可能です。

ul.relatedLink.exLink a {
  color: orange;
  font-weight: bold;
}

<ul class="relatedLink exLink">
<li><a href="http://example.com/">関連している外部リンク</a></li>
</ul>

<ul class="relatedLink">
<li><a href="/selectors/">関連している内部リンク</a></li>
</ul>

この指定ではclass属性の値にrelatedLinkとexLinkがついた要素にのみスタイルが適用されるので、class属性の値がrelatedLinkのみのul要素には適用されません。
また、クラスの複数指定は属性セレクタで、ul[class~="relatedLink"][class~="exLink"]と指定した場合と同じ扱いになります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• 関連している外部リンク

• 関連している内部リンク

ここまでだとIE6も問題無いように見えますが、この複数のクラスを同時指定には対応しておらず、上記のサンプルの場合最後に書かれたクラスの指定が反映されているだけです。
以下の例の場合、IE6と他のブラウザでは表示がかなり変わってきます。

ol li.relatedLink a {
  color: black;
}

ol li.relatedLink.exLink a {
  color: red;
}

ol li.relatedLink.exLink.pickupLink a {
  color: green;
}

ol li.pickupLink.exLink a {
  color: orange;
}

ol li.relatedLink.pickupLink a {
  color: blue;
}

ol li.spLink a {
  color: teal;
  font-weight: bold;
}

<ol>
<li class="relatedLink"><a href="">relatedLink</a></li>
<li class="relatedLink exLink"><a href="">relatedLink exLink</a></li>
<li class="relatedLink exLink pickupLink"><a href="">relatedLink exLink pickupLink</a></li>
<li class="relatedLink exLink pickupLink spLink"><a href="">relatedLink exLink pickupLink spLink</a></li>
<li class="exLink pickupLink"><a href="">exLink pickupLink</a></li>
<li class="relatedLink pickupLink"><a href="">relatedLink pickupLink</a></li>
<li class="pickupLink relatedLink"><a href="">pickupLink relatedLink</a></li>
</ol>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

1. relatedLink
2. relatedLink exLink
3. relatedLink exLink pickupLink
4. relatedLink exLink pickupLink spLink
5. exLink pickupLink
6. relatedLink pickupLink
7. pickupLink relatedLink

4番目のspLinkが有る部分は、本来なら太字になるだけでcolor: teal;の宣言は個別性の計算から反映されないはずですが、IE6では反映されてしまっています。
IE6はもうちょっと頑張って欲しいトコロですね。