Wordpress Custom CSS не работает для определенной группы классов

Question

Я пытаюсь переопределить цвет фона текущего выбранного элемента li в Wordpress, используя дополнительные пользовательские CSS на панели персонализации, но он не работает для определенного класса.

Я нажал F12 в chrome, чтобы получить имя класса элемента, и я ссылаюсь на него, но это работает для других классов.

This is working OK, color is changing:
.activity-list.item-list.bp-list  {
    background-color: #ffd6d6;
}

The element is <ul class="activity-list item-list bp-list">

This is Not working, color is not changing:
.bp-personal-tab.current.selected.loading {
    background-color:  green;
}

The element is <li id="groups-personal-li" class="bp-personal-tab current selected loading">

Я искал в интернете, чтобы попытаться понять, и я получил несколько результатов, говорящих, что с «точками» должен применяться стиль, поэтому мне становится трудно понять, почему первый работает, а второй - нет .

Связан ли тот факт, что у одного есть идентификатор, а у другого нет?

Answer 1

Речь идет о специфике вашего CSS. Возможно, в ваших темах есть более конкретное правило CSS для этого элемента, так что оно применяется вместо вашего.

Если вы можете сделать свой селектор более конкретным, его следует применить.

То, насколько конкретно вы можете быть более конкретным, зависит, конечно же, от вашего HTML и от того, чего именно вы хотите достичь. Если речь идет только об этом единственном элементе, вы можете использовать, например, идентификатор (который всегда более конкретен, чем классы).

    #groups-personal-li { ...}

Answer 2

Иногда это зависит от того, что загружается после переопределения стиля. Попробуйте с !important переопределить существующий стиль.

.bp-personal-tab.current.selected.loading {
    background-color:  #5FB97D !important;
}