普通のリンクは太字で表示しつつ、日記本文中にあるキーワードへのリンクだけは、IEでも太字にならないようにCSSを調整した。「IEでも」とあるのは、実は今までも「a.keyword {font-weight:inherit;}」というCSSを書いてあったから。
「inherit」は「親要素の値を継承」という、ちょっと特殊な指定のこと。この指定に対応しているブラウザ（Operaなど）ではこれまでも、普通のリンクは太字で表示され、日記本文中のキーワードは太字にならずに表示されていた。そして、IEでもそう見せたいと常々思っていたのだ。
しかし、単に「キーワードへのリンクは太字にしない」という指定だと、小見出し内のキーワードも太字にならなくなってしまう。小見出し全体は太字で表示しているので、小見出し内のキーワードリンクに限っては太字で表示したい。
そう思いつつも、ずっとほっておいたのだが、先ほどふと思いついた。「inherit」に対応していないIEでも、こちらの思った通りに表示する方法。
.section a.keyword{font-weight:normal;} .section h3 a.keyword{font-weight:bold;}
これでいいのだ。
CSSの指定は、あとから指定されたものが優先される。
1行目では、「小見出し＋本文の領域（.section）」のキーワードリンク（a.keyword）を「太字でない（font-weight:normal;）」と指定する。
続いて2行目で、「小見出し＋本文の領域（.section）内にある小見出し（h3）」のキーワードリンク（a.keyword）を「太字（font-weight:bold;）」と指定した。
全体→例外の順にCSSを指定することで、特定のセレクタにだけ特別なCSSを適用できるというわけ。と、いうことは頭ではわかっていたのだが、キーワードのリンク表示に応用することに今まで全然思い至らなかったのが、我ながらアホである。
ついでに、小見出しのカテゴリ名も太字を解除してみた。いかがでしょうか。
