質問: 以下のHTMLで、dlにclass属性が付いているせいなのか、 `` と書いた部分のテキストがその色になりません。 ``` (略) お知らせ 2016/10/15 hogehoge ``` 知恵袋でも同様の質問をしているのですが、そちらで頂いたコメントを元にデベロッパーツールで追っていったところ、該当するsectionを囲っているのは一番上の `` である事が解りました。しかしデベロッパーツールで調べると取り消し線が一杯ついており、これらを削除するととんでも無い事になってしまうのではないか、という恐怖が有ります。何かミニマムな直し方等は御座いますでしょうか?
回答: 調べ方 Chromeの開発者ツールを前提に書いていますが、ほかのブラウザでも(名前は違えど)似たような機能があるかと思います。 1. うまくスタイルが適用されない要素を開発者ツールで選択する 今回の場合テキストの文字色が変わらないという話なので、色が変わってくれないテキスト(に最も近い要素)を選択します。`` ではなく `` です。 2. 開発者ツール右側のタブで、StylesではなくComputedを見ます。Stylesではスタイルを定義した場所ごとに表示されますが、Computedでは適用される属性ごとに表示されるので、今回のような場合にはわかりやすいでしょう。 で、同様の状況を再現したサンプルだとこんな感じになります。 !画像の説明をここに入力 上に書かれているものほど優先され、上書きで効果を失っているものは取り消し線が引かれています。親要素にインラインで指定したものは下から2番目ですが、その上3つはaタグに対するスタイルですから、こちらが優先されていることがわかります。 本件の詳細 親要素のスタイルは子要素に直接適用されているわけではなく、親から継承するという形をとっています。子要素に直接スタイルを指定すると継承は無効になります。言い換えると、**子要素に指定したスタイルの方が優先されます**。 その仕組み上、親要素である `` でどれだけ頑張ってもこれを上書きすることはできません。子要素 `` に対して色を指定するなり、`color:inherit` として継承に戻す必要があります。