Динамически добавил стиль не работает

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

Answer 2

Не должно быть:

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

принять к сведению расположение запятой.

Answer 3

Это должно быть

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

; должно быть после того, как !important