css - css 中的水平导航栏，选择子项时保持父项突出显示

Question

我正在尝试一种纯 css 方法，以在单击子项并且用户导航到该页面时使“最父级”导航栏元素突出显示。我有一个带有无序列表的 primary navbar div，每个列表都有一个这样的列表，所以在这种情况下，用户导航到这里第二多的 li:

.primary-navbar ul li ul li{
    background-color: red !important;
}

当第二个 li 处于事件状态时，第一个 li 的背景颜色为蓝色，我该如何做到这一点？

我试过:

.primary-navbar ul li:active {
   background-color: blue !important
}

但这没有用，我不确定为什么。我试图避免 jquery...

Answer 1

:active 是元素处于事件状态时的状态(即链接在单击时处于事件状态)。当您加载新页面时，没有任何元素处于事件状态。您需要向新页面的 li 添加一个类(例如“事件”或“当前页面”)以获得您正在寻找的效果。仅使用 CSS 是不可能的。

当你实现它时，你还应该再看看你的 CSS:

.primary-navbar ul li.active {
   background-color: blue !important
}

这不仅会使第一个(父级)li.active 变为蓝色，还会将嵌套在其下方的任何 li.active 设为目标。即它也会使 .primary-navbar ul li.active ul li.active 变成蓝色。

尝试这样的事情:

.primary-navbar > ul > li.active {
   background-color: blue;
}

> 只会针对 li.active 直接位于 .primary- 下的 ul 下导航栏