css - 字体在选择时不会改变颜色

请检查我的小提琴：

http://jsfiddle.net/zzh0ym2m/1/

单击菜单按钮“主页”，“设置”等后，字体应更改为白色，但实际上没有。在尝试更改内容后，我无法弄清错误的位置。它应该变成白色：

.topmenu-selectedblue {
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedorange {
    color: #fff;
    font-weight: 700;
    background: -webkit-linear-gradient(#fdc652, #dba439)
}

最佳答案

看来这

.topmenu-ul > li a {
    color: #e6e6e6;
    font-size: .7rem;
    line-height: 20px;
    height: 20px;
    display: block;
    padding: 0 20px
}

正在覆盖其他任何设置。

所以您需要解决这个问题。

.topmenu-ul > [class*=topmenu-selected] > a{
    color: #fff;
}

就是说，您的CSS中有一些重复和非常特定的选择器，可以对其进行整理以使其更简单。

JSFiddle Demo