【CSS】aタグのフォントカラーが変わらない謎【初心に返ろう】

#Q. 深く考えたことないけどなんでフォントカラーを全体に指定してもaタグの中は変わらないの？

なんかもう経験として知ってたからスルーしまくってたこの疑問。
あえて切り込んで調べてみることにしました！
暇だからじゃないよ。

#A. 各ブラウザ（IE、Google Chrome…）でaタグにあらかじめフォントカラーを設定してあるから。

なんと。そんな単純なことだったのか。
なんかがっかりした。
確かにIEのリンクといえば青文字にアンダーライン！とかあるもんねぇ。

ちなみに私はCSSを書くときに最初に

CSS(はじめのほうに記述)

a{
   color:red;
   text-decoration:none;
}

とかなんとか書いてaタグ全体に反映されるようにします。
んで、イレギュラーで違う見た目にしたいときはクラスとかで細かく分けてた・・・んだけど、なにやら便利そうな記事を発見しました。

発見した記事 CSS tips - a タグの色が変わらないときは color: inherit を指定しよう | phiary

##color: inherit;

inherit の意味は、親要素のプロパティの値を継承すること。
つまり color: inherit; は親要素のカラーを継承するって意味になる。

例えば、ヘッダーの色を共通で赤くしたいとします。しかも特殊な赤。
いつもの私はこうしてました。

See the Pen aタグの便利な使い方 by かぺ (@kapeking) on CodePen.

まず全体反映用に nav に文字色指定し、a にも同じ色を指定します。

css(上記から抜粋)

nav{ color:#ff0e29; }
nav a{ color:#ff0e29; }

でもこれ、ちょっと2度手間感あるしスマートじゃない。
そこで inherit を使うと・・・

css(いい感じの記述例)

nav{ color:#ff0e29; }
nav a{ color:inherit; }

これでも結果は全く同じ！navで指定したカラーを継承します。
これなら後からリンク色変えても問題ないですね。

今度から私も color: inherit; をガンガン使っていこうと思います！