Important関数でエラーが表示されます。

Question

###前提・実現したいこと
以下のコードを書いたのですが、「!important」のコードがうまく働かず、赤いエクスクラメーションが発生します。

/ホバー時の線と文字の色を変更/
#navi ul li a:hover{
color: #10aba6 !important;
background-color:white;
}
#navi ul li a:before{
background:#10aba6 !important;
}
#navi ul,#navi{
background-color:white;
}
###発生している問題・エラーメッセージ
Importantのコードが働かない

エラーメッセージ

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

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、「赤いエクスクラメーション」とはどこに現れて、どんな文言かを追記されたほうが回答を得やすいと思います。

Answer 1

naviというタグはありません

質問内容のCSS

/*ホバー時の線と文字の色を変更*/

navi ul li a:hover {
    color: #10aba6 !important;
    background-color: white;
}
navi ul li a:before {
    background: #10aba6 !important;
}
navi ul, #navi {
    background-color: white;
}

によるとHTMLに<navi>と記述されているかと思いますが正しくは<nav>です。

つまりはプロパティの記述!importantがエラー原因ではなく、セレクタのnaviが機能していない状態です。
HTML側の記述を<nav>に修正した上でCSSも同様に

/*ホバー時の線と文字の色を変更*/

nav ul li a:hover {
    color: #10aba6 !important;
    background-color: white;
}
nav ul li a:before {
    background: #10aba6 !important;
}
nav ul, #navi {
    background-color: white;
}

と変更すれば正常に機能するかと思います。