嵌套 Sass 到 select 且仅影响第一级菜单锚点而不影响子菜单

Question

这里我试图给顶级菜单栏一个不同于子菜单项的高度。

似乎 first-child 影响所有菜单项（菜单和子菜单项），虽然它应该只影响菜单项，不知道确切的原因是什么，以及如何通过简洁的解决方案，无需使用额外的 class 选择器或添加 !important 规则。

请看一下代码，也提供了完整的代码。

HTML代码：

      <ul class="menu"> 
        <li class="active">
          
          <a href="#s1">Perfumes</a>
          
          <ul class="submenu">
            <li><a href="#">Asia</a></li>
            <li><a href="#">Europe</a></li>
          </ul>
          
        </li>

        <li>
          
          <a href="#s2">Gemstones</a>
          
          <ul class="submenu">
            <li><a href="#">Asia</a></li>
            <li><a href="#">Europe</a></li>
          </ul>
          
        </li>
     
      </ul>

Sass (SCSS) - 显示重点部分：

在菜单部分我有：

.menu
  a {
    &:first-child {
      height: 80px; line-height: 80px; // It applies to all the menu
      and sub-menu items, we want it to just be applied to the top
      menu bar items!
    }
  }

在子菜单中我有：

.submenu {
  
  & > li {
    
    a {
      height: 50px;  line-height: 50px;  
      // height: 50px !important;  line-height: 50px !important;
      // This works, but don't want to use !important, want to find other
        workarounds and the issues here       
    }
  }

注意：我不喜欢使用额外的class选择器，只是我喜欢使用advanced/nestedSass选择器。

完整代码： Code is here

Answer 1

我不知道 sass 但你生成的 css 是 .menu > li a:first-child 所以，它会影响所有子菜单中的所有第一个子菜单.您应该生成 .menu > li > a {}，这只会影响第一层的 's inside（香水和宝石）：

.menu > li > a {
  height: 80px;
  line-height: 80px;
}

在此 fiddle 中，我使用了您的 html 和您的 css（已编译）。注意我注释了编译的 css 第 25 行并添加了第 30

行

嵌套 Sass 到 select 且仅影响第一级菜单锚点而不影响子菜单

Nested Sass to select and affect only the first level menu anchors not the sub-menus

css

sass

css-selectors