リンクの色が２つのうち１つだけ変わらない

Question

Footer最下部のcopyrightの部分で「WordPress」と「Write」に対してリンクをかけて色を灰色で下線無しにしてhoverで色を黒に変えたいが、なぜかWordPressの方だけcssが反映されない。

<footer class="footer">
        <div class="footerfirst">
            <div class="firstcolumn">
                <div class="otokojohn">
                    <img src="otoko.png" class="otoko">
                    <span class="john">John Doe</span>
                </div>
                <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
            </div>
            <div class="secondcolumn">
                <p class="columntitle">フッター右</p>
                <p class="secondcolumncomment">3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
            </div>
            <div class="thirdcolumn">
                <p class="columntitle">最近の投稿</p>
                <div class="thirdcolumncomment">
                    <p class="thirdcolumnarticletitle"><a href="http://demo.themegraphy.com/write-ja/2018/09/01/theme-for-writing/">書くためのテーマ</a></p>
                    <p class="thirdcolumnarticledate">2018年9月1日</p>
                </div>
                <div class="thirdcolumncomment">
                    <p class="thirdcolumnarticletitle"><a href="http://demo.themegraphy.com/write-ja/2018/03/05/standard-post-with-images/">画像付きの投稿</a></p>
                    <p class="thirdcolumnarticledate">2018年3月5日</p>
                </div>
                <div class="thirdcolumncomment">
                    <p class="thirdcolumnarticletitle"><a href="http://demo.themegraphy.com/write-ja/2018/03/05/standard-post-with-quotes/">引用付きの投稿</a></p>
                    <p class="thirdcolumnarticledate">2018年3月5日</p>
                </div>
            </div>
            <div class="fourthcolumn">
                <div class="columntitle">
                    <p class="category">カテゴリー</p>
                </div>
                <div class="fourthcolumntitle">
                    <p class="fourthcolumnarticle"><a href="http://demo.themegraphy.com/write-ja/category/%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e6%8a%95%e7%a8%bf/">サンプル投稿</a></p>
                    <p class="fourthcolumnarticle"><a href="http://demo.themegraphy.com/write-ja/category/%e6%8a%95%e7%a8%bf%e3%83%95%e3%82%a9%e3%83%bc%e3%83%9e%e3%83%83%e3%83%88/">投稿フォーマット<a/></p>
                    <p class="fourthcolumnarticle"><a href="http://demo.themegraphy.com/write-ja/category/%e6%99%ae%e9%80%9a%e3%81%ae%e6%8a%95%e7%a8%bf/">普通の投稿<a/></p>
                </div>
            </div>
        </div>
        <!--<hr>-->
        <div id="copyright">
            <p class="copyright">Powered by 
                <span class="copyrightlink"><a href="https://ja.wordpress.org/">WordPress</a></span>
                | Theme: 
                <span class="copyrightlink"><a href="http://themegraphy.com/ja/wordpress-themes/write/">Write</a></span>
                 by Themegraphy</p>
        </div>
    </footer>

.copyright{
    text-align: center;
    margin: 0 0 50px 0;
    color: #A4A4A4;
    font-size: 15px;
    font-weight: bold;
}

.copyrightlink a{
    color: black;
    text-decoration: none;
}

.copyrightlink a:hover{
    color: black;
}

Answer 1

HTMLファイルのa要素の閉じ忘れというか<a/>と書いちゃっている辺りを修正してもらってから、

「WordPress」と「Write」に対してリンクをかけて色を灰色で下線無しにしてhoverで色を黒に変えたい

という「やりたいこと」と、「CSSでやっていること」の食い違いを無くしてください。

.copyrightlink a{
-   color: black;
+   color: #A4A4A4;
    text-decoration: none;
}

.copyrightlink a:hover{
    color: black;
}

Comments

[masa530]

<a/> と間違って書いてることに気がつかなかったです。
丁寧にありがとうございます。

Answer 2

こういうときはコードを最小限にして問題切り分けをします。

            <p class="copyright">Powered by 
                <span class="copyrightlink"><a href="https://ja.wordpress.org/">WordPress</a></span>
                | Theme: 
                <span class="copyrightlink"><a href="http://themegraphy.com/ja/wordpress-themes/write/">Write</a></span>
                 by Themegraphy</p>

HTMLの構文チェックにもかけます。
HTMLが正しくなければCSSの構造にも影響が出ます。

特にAタグ関係グチャグチャです。チェック結果を見てなおしてみてください。