Question

请查看我的小提琴：

点击菜单按钮＆＃34; Home＆＃34;，＆＃34;设置＆＃34;等等，字体应该变为白色，但它不会。在尝试改变之后，我无法弄清楚错误的位置。它应该变成白色：

.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

选择时字体不会改变颜色

1 个答案: