Question

好吧，我终于差不多完成了我的第一个网站。除了我的页脚导航链接似乎卡在紫色（默认）的事实。我希望文本显示为白色。修复其他地方的链接没问题。但是，我似乎无法在代码中找到任何改变它的东西。我试图仔细审查一切，但我被卡住了。有人可以告诉我我可能错过了什么吗？

#footer{

    margin: 1px;
    height:100px;
    width: 100%;
    border-top:3px solid #107CBD;
    clear: both;

    color: #fff;
    line-height:23px;
    background-color:#505050;
    text-align:center;
    position:fixed;
        font-size:12px;
    bottom:0px;
vertical-align:baseline:
}
footer {
    width: 100%;
    padding-top: 3.5%;
    padding-bottom: 9.5%;
    background-color: #505050;
border-top:8px solid #107CBD;
position:fixed;
text-align:center;

}



#footer ul li a: hover{
    color: #fff;
    background-color:#777;
}


#footer ul li a{
    text-decoration: none;
    font-family: Noto-sans,sans serif;
    padding:2em 1em;
    color: #fff;

}


#footer ul li a: hover{

    background-color:#777777;

}

footer ul {
    width: 100%;
/*    margin-right: 25%;*/
}

footer ul li {
    float:0px;
    padding-right:2%;
    margin-right:3%;
    display: inline;
    font-family:Noto sans,sans serif;
    font-size:13px;

}

#footer ul li a{
    text-decoration: none;
    font-family:'Noto-sans',sans serif;
    padding:2em 1em;


}



div.footer-social{
     float:right;
    padding-right:10%;
    margin-right:5%;
    display: inline;
    margin-top:-2.8%;
}

Answer 1

请参阅我认为您的CSS中存在错误。

vertical-align:baseline:

应该是

vertical-align:baseline;

因为其余的css代码可能无法正常工作

Answer 2

我刚刚在您的codepen中看到您使用的是HTML5 <footer>标记，但在您的CSS中，您（至少对于那些链接）使用#footer作为ID几次：

#footer ul li a{ (etc.)

这可能是原因。

Answer 3

尝试这样做：

footer ul li.changeBackground a 
{
    color: #ffffff !important;
}

这可能会对你有帮助。

CSS页脚链接不会更改为白色

3 个答案: