最近, Web プログラミングを教えてる子から, 「a タグの色が変わらないんです💦」 という質問受けました.

CSS 初心者あるあるだなぁ春だなぁと感じつつ, そういえば前に教えてた子からもおなじ質問を受けたことを思い出しました.
毎回説明するのもあれなんでここに対処法を載せておきます.

原因

a タグには大抵ブラウザが勝手に色をつけてくれちゃっています.
何も色を指定していないのに色が変わっているのが下記のサンプルでわかるかと思います.

runstant

なので, 親要素である h2 タグに css で色を付けても a タグに直接あたっている 色が優先されちゃって反映されないというわけです.

runstant

対処法

安直に考えると a タグに直接色を指定してデフォルト色を上書きしちゃいがちです. 確かにこれでも解決します.

h1 a {  
  color: red;
}

ですがこれだと h1 と a タグに同じ色をあてたいときに h1, a それぞれに色を指定しないといけません. これだとちょっとだけ汎用性が失われちゃいます.

そこで使えるのが inherit です! これを指定すると親に指定してある値を 継承 してくれます.

これを a タグに指定してあげると h1 タグに指定した色がちゃんと反映されて コードもスッキリします.

h1 a {  
  color: inherit;
}

runstant

こちら比較デモです.

runstant

蛇足

個人的には a タグをデフォルト色で使うことなんて最近ほとんど無いのでいっそのことグローバルで

a {  
  color: inherit;
}

ってやっちゃえばいいんじゃないかなぁなんて思ってます.