我不能把一个盒子放在一个盒子里，加上颜色不变

问题描述：

在我的网站的主页上有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>

问题是，它使黑色背景色与白色字体颜色，它会在其他环节，而不是内联跟他们。

您样式分配给使用id = “接触” 的容器。但链接有链接样式 – Nuchimik

对不起，我不明白你的答案 –

我知道它已经有链接样式，但我认为它不会与一个ID和！重要 –

答

但我认为在这种情况下将链接放置在“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>

我不能把一个盒子放在一个盒子里，加上颜色不变

相关推荐