文字色が継承される要素について教えてください。

親要素で指定した文字色はすべての子要素に継承されると思っていたのですが、対象になるのはブロックレベルの子要素だけなのでしょうか？
以下のようなコードを書いた際に、子要素<a>だけが変わっていなかったので、インラインの子要素には継承されないのかなと思い質問させていただきました。いろいろ検索しても出てこずもやもやしております。どうかよろしくお願いします。

###該当のソースコード
html

<div class="top-wrapper">
  <div class="container"> 
    <h1>ここは変わる</h1>
    <p>ここも変わる</p>
    <div class="btn-wrapper">
       <a href="#">ここが変わらない</a>
    </div>
  </div>
</div>

css

.top-wrapper {
  color:white
}

kei344

2017/02/28 15:00

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

ベストアンサー

ブラウザには標準でユーザーエージェントスタイルシートが組み込まれていて、そしてその中で<a>タグへの色設定も適用されています（Chromeのインスペクタでも確認できます）。

colorも継承はされますが（MDN）、ユーザーエージェントスタイルシートで<a>自体に指定がしてあるので、そちらが優先されます。aに直接かけるか、あるいはs8_chuさんの回答にあるように、クラスやIDなど、詳細度の高いセレクタで色をかけましょう。

なお、本題ではありませんが、リンクの色を同じにするのはユーザビリティを考えると、あまり良くないかなと思いました。

投稿2017/02/28 22:44

maisumakun

総合スコア145183

退会済みユーザー

2017/03/01 08:21

ユーザーエージェントスタイルシートというのを初めて知りました！詳しく教えてくださりありがとうございます。

行動規範の内容に同意します

スタイルを子孫要素に適用するためには、以下のようにする必要があります。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .top-wrapper * {
13            color: white;
14        }
15    </style>
16</head>
17<body>
18<div class="top-wrapper">
19    <div class="container">
20        <h1>ここは変わる</h1>
21        <p>ここも変わる</p>
22        <div class="btn-wrapper">
23            <a href="#">ここが変わらない</a>
24        </div>
25    </div>
26</div>
27</body>
28</html>