动态添加样式不起作用

Question

我有一个带有以下CSS的元素类:

#item-group-navigation li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: MyriadProReg;
    vertical-align: -1px;
}

我在某个事件后使用jQuery添加以下类:

.item-group-selected{
    color:rgb(245, 255, 0);!important
}

但问题是动态添加的样式不起作用.而是应用默认样式.我试图使用!important关键字,但它不起作用.谁能解释我做错了什么？

Answer 1

如果你使用!important它需要放在分号之前.

color:rgb(245, 255, 0) !important;

你不应该使用它.确保在可能覆盖该颜色的任何其他样式之后添加您的类,并检查您的页面以查看当前颜色的计算位置.

例如,如果您的CSS看起来像这样:

.item-group-selected{
    color:rgb(245, 255, 0);
}

#item-group-navigation li a {
    color: white;
}

你应该移动.item-group-selected选项下方的#item-group-navigation和/或给它更高的特异性:

#item-group-navigation li a {
    color: white;
}

#item-group-navigation li.item-group-selected a {
    color:rgb(245, 255, 0);
}