Html 如何仅为一级菜单应用样式

这里是菜单结构，我想做的是，当我单击父级项目或任何子菜单项时，类

活动

将被添加到单击的菜单中

我只想更改父菜单项的颜色，但不想更改子菜单项的颜色，我如何才能做到这一点。现在发生的事情是，我已经应用了css，但它将应用于父菜单以及子菜单项

。在菜单中居中{
&：非（div.we-mega-menu-submenu）{
.we-mega-menu-li.active{
a{
颜色：蓝色！重要；
}
}
}
}

使用

仅将样式应用于给定选择器内的元素，而无需进一步深入

下面是一个例子：

div.wrapper > a {  /* only applied to direct children */
    font-weight: bold;
}

div.inner a {
    font-style: italic;
}

---

第一级（粗体）
第二级（斜体）
第二级（无样式）

举一个工作示例。

您的父菜单界面添加了指向example@DAMMAKUpdated with example@Alex的链接。这里只有

a

元素是您的顶级菜单项，因此不清楚您所显示的CSS如何对这里的多个级别产生影响。

<div class="wrapper">
    <a>1st Level (Bold)</a>
    <div class="inner">
        <a>2nd Level (Italic)</a>
    </div>
    <div class="noclass">
        <a>2nd Level (No style)</a>
    </div>
</div>