嵌套Sass只选择和影响一级菜单锚，不影响子菜单

Question

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

似乎first-child会影响所有菜单项(菜单和子菜单项(，尽管它应该只影响菜单项，不知道确切的原因是什么，以及如何在不使用额外的类选择器或添加！重要规则。

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

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

注意：我不喜欢使用额外的类选择器，只是喜欢使用高级/嵌套的Sass选择器。

完整代码：代码在这里

Answer 1

我不知道sass，但您正在生成的css是.menu>李：第一个孩子，所以它会影响所有子菜单中的所有第一个孩子。您应该生成.menu>李>a｛｝，这将只影响的内部第一级(香水和宝石(：

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

在这个小提琴中，我使用了你的html和css(编译(。注意，我对编译后的css第25行进行了注释，并添加了第30行