CSS 页脚链接不会变为白色

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 页脚链接不会变为白色

CSS footer links will not change to white

css

navigation

footer