如何在引导 4 滚动间谍中为父节点和子节点分配不同的颜色?

Question

在下面链接的示例中，选择子项时，子项及其父项的背景色将变为相同的颜色。对我来说，这有点令人困惑。有没有办法让子(活动(链接的背景颜色与父链接的背景颜色不同？在示例中，它们都是蓝色的，如果我希望父项为灰色，而活动子项为蓝色，该怎么办？谢谢。

Bootstrap 4.x Scrollspy - 嵌套导航示例

Answer 1

您可以通过覆盖父活动链接来做到这一点，然后使用内部 .nav-pills 链接上的 CSS 下一个同级(+( 选择器"重置"子项的默认蓝色......

/* 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;
}