jquery - 动态添加的样式不起作用

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 的下方和/或将其设置为更高的 specificity :

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

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