あれ、この記述であってるはずなのに、なぜかcssが反映されない、、！？
学習初期の頃 aタグ(リンクタグ)に青色がついてて、それ以外は元々の設定されている色がついているのに、、
と思ったことはありませんか？
単純にリンクの部分にブラウザ設定の色が指定されているせいなのですが
aタグ自体に
a {
color: #333;
}
などとしていたのですが、それでも変わらない事案が発生。!importantするのもちょっと避けたい。
その際やったことを記述します。
親要素の色を引き継ぐ
a {
color: inherit;
}
を指定したところ無事親要素の色を引き継ぐことができました。これさえつけておけば、毎度aタグに色を指定する必要もありません。
ページ全体で、この指定をしておいて、一部違うところにはaタグにクラスをつけ、色を変える、、という指定でいいかな？と思いました。
ただ、今回の場合は、なぜか
- aタグ自体に指定しても色が変わらない
- aタグのクラスを記述して指定しても色が変わらない
- watch sassをしてるから関係ないかもしれないけれど、キャッシュの削除も済み。
だったのでちょっと謎が残るところではありますが、、、通常はaタグ自体に色指定で変わるかと思います。でも大抵はaタグだけ色変えるってことはないかと思うのでグローバルで指定してしまうのがスッキリするかもしれません。
参考にしました↓
CSS tips - a タグの色が変わらないときは color: inherit を指定しよう | phiary
実際制作してると、全く歯が立たなかったのでcss設計本勉強中です。
