29591


以下のHTMLで、dlにclass属性が付いているせいなのか、 `<dd style="color: #FF4500;">`
と書いた部分のテキストがその色になりません。

[code]

    <div id="content">
    （略）
    <section>
    <h1>お知らせ</h1>
    <dl class="dl-horizontal">
    <dt>2016/10/15</dt>
    <dd style="color: #FF4500;">
      <a href="...">hogehoge</a>
    </dd>
    
[/code]

[知恵袋でも同様の質問をしている](http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11165627441?fr=chie_my_notice_newans)のですが、そちらで頂いたコメントを元にデベロッパーツールで追っていったところ、該当するsectionを囲っているのは一番上の
`<div id="content">`
である事が解りました。しかしデベロッパーツールで調べると取り消し線が一杯ついており、これらを削除するととんでも無い事になってしまうのではないか、という恐怖が有ります。何かミニマムな直し方等は御座いますでしょうか？


CC BY-SA 3.0
2016-10-15T14:10:16.723
29588
2016-10-15T15:59:53.080
2016-10-15T15:59:53.080
5044
19182
question
css
インラインCSSで指定した文字色が適用されません。どこでオーバーライドしているか効率的に探す方法はないでしょうか？


## 調べ方

Chromeの開発者ツールを前提に書いていますが、ほかのブラウザでも（名前は違えど）似たような機能があるかと思います。

  1. うまくスタイルが適用されない要素を開発者ツールで選択する  
今回の場合テキストの文字色が変わらないという話なので、色が変わってくれないテキスト（に最も近い要素）を選択します。`<dd>` ではなく `<a>` です。

  2. 開発者ツール右側のタブで、StylesではなくComputedを見ます。Stylesではスタイルを定義した場所ごとに表示されますが、Computedでは適用される属性ごとに表示されるので、今回のような場合にはわかりやすいでしょう。

で、[同様の状況を再現したサンプル](https://jsfiddle.net/yfeoeq9a/2/)だとこんな感じになります。

[![画像の説明をここに入力](https://i.stack.imgur.com/s54fP.png)](https://i.stack.imgur.com/s54fP.png)

上に書かれているものほど優先され、上書きで効果を失っているものは取り消し線が引かれています。親要素にインラインで指定したものは下から2番目ですが、その上3つはaタグに対するスタイルですから、こちらが優先されていることがわかります。

## 本件の詳細

親要素のスタイルは子要素に直接適用されているわけではなく、親から継承するという形をとっています。子要素に直接スタイルを指定すると継承は無効になります。言い換えると、
**子要素に指定したスタイルの方が優先されます** 。

その仕組み上、親要素である `<dd>` でどれだけ頑張ってもこれを上書きすることはできません。子要素 `<a>`
に対して色を指定するなり、`color:inherit` として継承に戻す必要があります。


CC BY-SA 3.0
2016-10-15T15:15:41.893
29591
2016-10-15T15:15:41.893
8000
29588
answer