cssで文字の色を変えたい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
phpとwordpressでホームページを作ろうとしているプログラミング初心者です。

固定ページでメニュー項目を作って、ブラウザに表示させたのですが、
各項目の文字の色が青くなってしまい、cssで文字の色を指定しても、
色がかわりません。因みにfontsizeや太さなどを指定したらきちんと反映
されるのですが、色だけがかわりません、

教えていただけるとありがたいです。

該当のソースコード

色を変えたいプログラム↓
<div class="col-sm-8">
            <ul class="active">
                <?php foreach ($menu_items as $item) : ?>
                    <li class="font-style">
                        <a class="nav-link" href="<?php echo esc_attr($item->url); ?>"><?php echo esc_html($item->title); ?></a>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

適用したｃｓｓ↓
.font-style {
font-size: 15px;
font-weight: bold;
color: black;
}

Comments

[int32_t]

ブラウザの開発者ツールで、色が変わらない部分に適用されているスタイルを見てみましたか?

Answer 1

ブラウザの開発者ツールなどで確認すればどのスタイルが適用されているのかがわかると思いますが、おそらく親テーマか何かのcssに書かれているcolorの方が詳細度が高いのではと推測されます。
参考　詳細度 - CSS

Comments

[wyook]

ありがとうございます!!解決いたしました!!!
感謝!感激!

Answer 2

<a class="nav-link" href="<?php echo esc_attr($item->url); ?>"><?php echo esc_html($item->title); ?></a>

　ここを見る限りですが、テキストがリンクになっていませんか？
詳しくは無いのですが恐らくnav-linkというクラス(リンクのテキストを管理するクラス)でテキストの色が青色に設定されていると思います。
cssの書式設定では、より狭い範囲に適用されているクラスが優先されますので、<li>要素のfont-styleよりも<a>要素のnav-linkが優先されてしまっているのではないでしょうか。

<a class="nav-link font-style" href=(以下略)></a>

　と書き換えれば適用されるのでは？

（以下追記）
具体的な説明としては、

①より狭い範囲の書式が優先される
例：

<div class="class-a">
  <a class="class-b" href=(以下略)></a>
</div>

この場合、class-bの方がclass-aよりも狭い範囲に適用されているので、class-aよりもclass-bが優先されます。

②より後に書いた書式が優先される
例：

<a class="class-a class-b" href=(以下略)></a>

この場合、class-bの方がclass-aよりも後に書かれているので、class-aよりもclass-bが優先されます。

Comments

[wyook]

ありがとうございました!!!
解決いたしました!!!!感謝でございます！！！