CSSの記述でのクラスの定義で

CSSの記述の中で
.yoko1 {
padding : 0 0 5px 10px;
border-bottom: 4px solid #00ffff;
margin-top: 1em;
margin-bottom: 2em;
}
とクラス名が付いています
p.yoko1 {
padding : 0 0 5px 10px;
border-bottom: 4px solid #00ffff;
margin-top: 1em;
margin-bottom: 2em;
}
こっちはタグ名に応じたクラスを定義していますが
タグ名に応じたクラスを使用するメリットはなんなのでしょうか？
全てはじめに書いたクラスをしようしても問題はないように思うのですが、、まだ勉強始めたばっかりで疑問に思い質問させていただきました。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： noname#20964 回答日時： 2006/07/09 02:48

最も簡単な例をあげると

.a{background-color:blue}
p.a{color:red}
<p class="a">文字：赤/背景：青</p>
<div class="a">文字：黒/背景：青</div>
このようなときに便利ですね。
これをclass属性のセレクタだけでやろうとすると
.a{background-color:blue}
.b{color:red;background-color:blue}
<p class="a">文字：赤/背景：青</p>
<div class="b">文字：黒/背景：青</div>
のようになりますよね。
この場合background-color:blueが1箇所減らせるってことですね。

それとセレクタの詳細度っていうのがありまして
例えば
div.a{font-size:10px}
.a{font-size:20px;color:red}
<div class="a">font-size:10px;color:red</div>
<p class="a">font-size:20px;color:red</p>
のように書くとなんとなく後から書いたfont-size:20pxが両方に適用される気がしませんか？
でもdiv.aは11、.aは10だから<div class="a">にはfont-size:10pxが適用されるんです。
これは順番を入れ替えればどうにでもなることなんでメリットって言うほどのことでもないのですが、知らないで書いているとハマルことがあります。

参考URL：http://hp.vector.co.jp/authors/VA022006/css/casc …

No.1 回答者： noname#20377 回答日時： 2006/07/09 01:47

解りやすそうな記事

スタイルシートWebデザイン
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003mak …