cssで、タグのリンクの色変更が適用されない

Question

cssで、タグのリンクの色変更が適用されない

aタグのカラーを白にしたいのですが、
なぜかデフォルトの青色のまま変わらないです。

該当のソースコード

 <ul class="ul1"> 
                <a href="https://www.youtube.com/"> <li class="fab fa-instagram fa-lg"></li></a>
                <li class="fab fa-twitter-square fa-lg"></li>
                <li class="fab fa-facebook-square fa-lg"></li>
               </ul>   

a {
    text-decoration:none;
    }

a:link {
    color:white;
}
/* linkの色を調整 */
    
a:hover {
    color:gray;
}
/* linkにカーソルを合わせた時の色を調整 */

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ツール：visual studio code

Answer 1

動くサンプル：https://jsfiddle.net/ydvg4az6/

特にCSS構文に問題はありません。

---

HTMLの構文はul要素直下にa要素は置けないので、間違っています。

 <ul class="ul1"> 
                <li class="fab fa-instagram fa-lg"><a href="https://www.youtube.com/"></a></li>
                <li class="fab fa-twitter-square fa-lg"></li>
                <li class="fab fa-facebook-square fa-lg"></li>
               </ul>   

【<ul>: 順序なしリスト要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

---

変更が適用されない原因としては、下記二つが可能性として高いです。デベロッパーツールで確認してみましょう。

• 他のCSSが適用されている
• そもそも提示されたCSSが読み込まれていない

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

Comments

[hayashi_naoki]

回答ありがとうございました！
無事解決しました！

Answer 2

a {
  text-decoration:none;
  color:white;
}
a:hover {
  color:gray;
}

かな？

Comments

[kyoya0819]

サンプル
https://codepen.io/asuchi0819/pen/gOOevvM?editors=1100

サンプルではわかりやすいように背景色に青色を追加しています。

[hayashi_naoki]

なるほど！
解決できました！
ありがとうございました！