Как назначить разные цвета для родительских и дочерних узлов в Bootstrap 4 Scroll Spy?

Question

В примере по ссылке ниже, когда выбран дочерний элемент, цвет фона дочернего элемента и его родительского элемента становится одинаковым.Для меня это немного сбивает с толку.Есть ли способ, чтобы дочерняя (активная) ссылка имела цвет фона, отличный от цвета фона родителя?В этом примере они оба синего цвета, что если бы я хотел, чтобы родитель был серовато-серым, а активный дочерний - синим?Спасибо.

Bootstrap 4.x Scrollspy - Пример с вложенными навигационными элементами

Answer 1

Вы можете сделать это, переопределив родительскую активную ссылку, а затем "сбросить" синий цвет по умолчанию на дочерних элементах с помощью селектора CSS next sibling (+) на внутренних ссылках .nav-pills ...

/* parent gray */
.nav-pills .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: grey;
}

/* child default blue */
.nav-pills .nav-link + .nav .nav-link.active {
    background-color: #007bff;
}

Демо: https://www.codeply.com/go/lfU9NTAETj

Answer 2

Просто используйте CSS и измените его вручную таким образом, и все активные потомки перейдут в другой цвет:

a.nav-link.ml-3.my-1.active {
background-color: red;
}