html - 如何仅对一级菜单应用样式

Question

我这里有菜单结构，我想做的是，当我单击父级元素或任何子菜单项时，类 active 将被添加到菜单中被点击。

我只想更改父菜单项的颜色，而不是子菜单项的颜色，我该怎么做。现在正在发生的事情是我已经应用了 css，但它被应用于父菜单和子菜单项。

.center-in-menu {
  &:not(div.we-mega-menu-submenu) {
    .we-mega-menu-li.active {
      a {
        color: blue !important;
      }
    }
  }
}

<ul class="nav-tabs center-in-menu">
<li class="we-mega-menu-li dropdown-menu">
<a href="#">Menu 1</a>
<div class="we-mega-menu-submenu">
  <ul class="nav-tabs">
    <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
    <li class="we-mega-menu-li dropdown-menu"><a href="#">submenu2</a></li>
    <div class="we-mega-menu-submenu">
      <ul class="nav-tabs">
        <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
        <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
        <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
        <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
        <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
      </ul>
    </div>
    <li class="we-mega-menu-li"><a href="#">submenu3</a></li>
    <li class="we-mega-menu-li"><a href="#">submenu4</a></li>
    <li class="we-mega-menu-li"><a href="#">submenu5</a></li>
  </ul>
</div>
<li class="we-mega-menu-li"><a href="#">Menu 2</a></li>
<li class="we-mega-menu-li"><a href="#">Menu 3</a></li>
<li class="we-mega-menu-li dropdown-menu">
  <a href="3">Menu 4</a>
  <div class="we-mega-menu-submenu">
    <ul class="nav-tabs">
      <li class="we-mega-menu-li"><a href="#">submenu1</a></li>
      <li class="we-mega-menu-li active dropdown-menu"><a href="#">submenu2</a></li>
      <div class="we-mega-menu-submenu">
        <ul class="nav-tabs">
          <li class="we-mega-menu-li active"><a href="#">submenu1</a></li>
          <li class="we-mega-menu-li"><a href="#">submenu2</a></li>
          <li class="we-mega-menu-li"><a href="#">submenu3</a></li>
          <li class="we-mega-menu-li"><a href="#">submenu4</a></li>
          <li class="we-mega-menu-li"><a href="#">submenu5</a></li>
        </ul>
      </div>
      <li class="we-mega-menu-li"><a href="#">submenu3</a></li>
      <li class="we-mega-menu-li"><a href="#">submenu4</a></li>
      <li class="we-mega-menu-li"><a href="#">submenu5</a></li>
    </ul>
  </div>
</li>
<li class="we-mega-menu-li"><a href="#">Menu 5</a></li>
</ul>

例子在这里 https://codepen.io/Chandanay/pen/YzKJNEE

Answer 1

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

这是一个例子:

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

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

---

<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>