ボックス内にボックスを入れても色を変更できない

Question

私のサイトのメインページには、すべてのページに同じ方法で表示したいハイパーリンクが4つあります。私がマウスを置いたときと同じ色になるようにするページのリンクが必要な場合を除きます。

私はこのコードでそれを得ることができると思った：

.navigation { 
 
    padding: 40px 0px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 30px; 
 
} 
 

 
.navigation a { 
 
    background: black; 
 
    border: 1px solid grey; 
 
    border-radius: 7px; 
 
    color: white; 
 
    display: inline-block; 
 
    margin: 100px 35px; 
 
    padding: 14px; 
 
    text-decoration: none; 
 
    opacity: 0.75; 
 
    font-family: impact; 
 
} 
 

 
.navigation a:hover { 
 
    background: white; 
 
    border: 1px solid black; 
 
    color: black; 
 
} 
 

 
#contact { 
 
    background: white !important; 
 
    color: black !important; 
 
}

<div class="navigation"> 
 
    <a href="./productions.html">Mes productions</a> 
 
    <a href="./DJ.html">DJ</a> 
 
    <a target="_blank" href="./CV.pdf">Mon CV</a> 
 
    <div id="contact"> 
 
    <a href="./contact.html">Me contacter</a> 
 
    </div> 
 
</div>

問題は、それが白いフォントの色を黒の背景色を保持していることであり、それは他のリンクではなく、インラインの下に行きますそれらと一緒に。

Answer 1

しかし、私はこの状況では "div"にリンクを置くのは悪い習慣だと思います。リンクのクラスを登録し、このクラスのスタイルを作成するだけです。

.navigation { 
 
    padding: 40px 0px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 30px; 
 
} 
 

 
.navigation a { 
 
    background: black; 
 
    border: 1px solid grey; 
 
    border-radius: 7px; 
 
    color: white; 
 
    display: inline-block; 
 
    margin: 100px 35px; 
 
    padding: 14px; 
 
    text-decoration: none; 
 
    opacity: 0.75; 
 
    font-family: impact; 
 
} 
 

 
.navigation a:hover { 
 
    background: white; 
 
    border: 1px solid black; 
 
    color: black; 
 
} 
 

 
#contact a { 
 
    background: white !important; 
 
    color: black !important; 
 
}

<div class="navigation"> 
 
    <a href="./productions.html">Mes productions</a> 
 
    <a href="./DJ.html">DJ</a> 
 
    <a target="_blank" href="./CV.pdf">Mon CV</a> 
 
    <div id="contact"> 
 
    <a href="./contact.html">Me contacter</a> 
 
    </div> 
 
</div>