Question

我尝试使用纯粹的css方法来保持最亲近的父母。单击子项并用户导航到该页面时，会突出显示导航栏项。我有一个带有无序列表的@-webkit-keyframes intro { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } div，每个列表都有一个这样的列表，所以在这种情况下，用户导航到第二大李：

primary navbar

当第二个li处于活动状态时，如何制作它，第一个li的背景颜色为蓝色？

我试过了：

.primary-navbar ul li ul li{
    background-color: red !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

下的ul下的.primary-navbar

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

1 个答案: