リンクの色の方が優先される理由

たとえば下記のようなHTMLに、下記のようなCSSを指定した場合、aタグに指定したCSSの方が有効に作用する。

1
2
3

<h3 class="entry-header"><a href="/post.html">記事のタイトル</a></h3>

<!-- more -->

1 2	a {color: blue;} h3.entry-header {color: red;}

まあそういうものなのだと、普段はたいして気にとめていなかったのですが、あらためて説明しようとすると、これがよく分からない。単純に詳細度で考えたら、h3.entry-headerの方が強いのにどうしてだろう。ということで、CSS完全ガイドを購入して、きちんと読んでみました（3章まで）。p71〜p74あたりにそのあたりのことが説明されていた。

要するに、祖先から継承した指定の詳細度は「なし」という扱いになるため、aタグに指定した内容の方が詳細度が高く、より強く作用するということなのだ。うーん、調べてみてみると、そんなに難しい話じゃない。継承した指定の詳細度がもともとと同じ詳細度を持っていたら、たとえば body#foo というような指定があったら、いろんな子孫に不要に作用してしまう。うまくできている。

ふむ。つまり。この件について、CSSを生業としていないような人に質問されたら、「より内側にあるタグに指定したCSSの方が、外側のタグに指定したものより有効に作用します」と伝えても特に問題はなさそうだ。