导航栏.active类无法覆盖链接文本颜色问题求助

嘿，我一眼就看出你遇到的问题了——你的.active类样式没生效主要有两个关键点，咱们一步步搞定它：

问题1：CSS优先级不够 #

你给li a设置了color: #fff，这个选择器的优先级比单独的.active类要高（li a是两个元素选择器，权重为0,0,0,2；而.active只是一个类选择器，权重为0,0,1,0）。所以就算你给.active设置了颜色，也会被li a的样式覆盖掉。

问题2：颜色值语法错误 #

你的.active类里写的color: 003271;少了开头的#符号，正确的写法应该是color: #003271;，不过这个问题得在优先级问题解决后才会生效。

修复方案 #

把你的.active选择器改成li a.active，这样它的优先级就会超过li a，同时修正颜色值的语法错误。修改后的CSS代码如下：

/*NavBar*/
ul{
 list-style-type: none;
 margin: 0;
 padding: 0;
 width:200px;
 background-color: #003271;
 border: 1px solid #fff;
 height: 100%;
 position: fixed;
 overflow: auto;
}
li{
 text-align: center;
 border-bottom:1px solid #fff;
}
li:last-child{
 border-bottom:none;
}
li a{
 display: block;
 color: #fff;
 padding: 8px 16px;
 text-decoration: none;
}
li a:hover{
 background-color: #555;
 border: 1px solid #fec500;
 color: white;
}
/* 修改这里的选择器，提升优先级并修正颜色值 */
li a.active{
 background-color: #fff;
 color: #003271;
 border:1px solid #fec500;
}

这样修改后，带有.active类的a标签就会正确显示#003271的文本颜色，同时背景色和边框样式也能正常生效啦。

内容的提问来源于stack exchange，提问作者Steven Richard Ledoux