メモログ

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

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

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

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

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

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