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

Question

请查看我的 fiddle :

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)
}

Answer 1

好像是这个

.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