CSS1で定義された子孫セレクタは、ある特定の要素の子孫（入れ子構造）にあたる要素に適用されます。
この子孫セレクタは、各単純セレクタ（クラスセレクタやIDセレクタ、タイプセレクタなど）を半角スペースなどの空白類文字で区切って書きます。子孫セレクタ自体には個別性が有りませんが、子孫セレクタを使って複数のセレクタを組み合わせる事で個別性が高くなっていきます。

(X)HTMLは構造を示すためにdiv要素などで入れ子構造になっていくため（まぁ実際にはデザインを再現する為に激しい入れ子構造になる事は多々有りますが...）、子孫セレクタは非常に頻繁に使います。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

子孫セレクタのサンプル

div#main p {
  margin-bottom: 10px;
}

div#main p span.att {
  color: red;
}

(X)HTMLの構造を示すように半角スペースで書いていきます。これで、div#main内のp要素に適用されます。
後に書かれているサンプルは更にp要素内のspan.attのみに適用されます。
このように子孫セレクタは要素を絞って指定出来るため、上手く活用する事でクラスセレクタやIDセレクタを無駄に使わずにすませることができます。

他の例として、以下のように書く事でdiv.item内のp要素のみmargin-bottomの値を変える事が可能です。

p {
  margin: 0;
}

div#main p {
  margin-bottom: 10px;
}

div#main div.item p {
  margin-bottom: 5px;
}

<div id="main">
<p>ここの下マージンは10px</p>
<div class="item">
<p>ここの下マージンは5px</p>
</div>
<p>ここの下マージンは10px</p>
</div>

<div id="sub">
<p>ここの下マージンは0px</p>
</div>

タイプセレクタでp要素のmarginを0にし、子孫セレクタを使ってdiv#main pにはmargin-bottom: 10px;が適用され、div#main div.item pには、margin-bottom: 5px;が適用されます。
また、#subには子孫セレクタによる指定が無いため、タイプセレクタでp要素に指定した値が適用されます。

子孫セレクタはその定義上、書き方次第で(X)HTMLの構造を視覚的に分かりやすくもしてくれます。とはいえ、あまりにも構造を追い過ぎてかなりの数のセレクタを繋げてしまうとかえって分かりにくくなってしまうので個別性の計算ともあわせてバランスを見て書くといいと思います。

とても分かりやすいセレクタで使い勝手も良い分、その使い方次第で効率がかなり変わってきますので、自分が作ったサイトのCSSを眺めて、無駄が無いかなどを確認すると色んな発見が有るかも知れません。