嵌套 Sass 仅选择和影响第一级菜单锚点而不影响子菜单

Posted

技术标签:

【中文标题】嵌套 Sass 仅选择和影响第一级菜单锚点而不影响子菜单【英文标题】:Nested Sass to select and affect only the first level menu anchors not the sub-menus 【发布时间】:2022-01-23 18:36:13 【问题描述】:

在这里,我试图为***菜单栏提供与子菜单项不同的高度。

似乎first-child 影响所有菜单项(菜单和子菜单项)虽然它应该只影响菜单项,不知道究竟是什么原因,以及如何在不使用的情况下通过简洁的解决方案解决它额外的类选择器或添加一个 !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       
    
  

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

完整代码: Code is here

【问题讨论】:

我不知道 sass 但你生成的 css 是 .menu &gt; li a:first-child 所以,它会影响所有子菜单中的所有第一个子 。你应该生成.menu &gt; li &gt; a ,这只会影响的内部第一层(香水和宝石) @AlvaroMenéndez 我想我之前也在我的代码中尝试过,如果你有时间,你能否提供一个简单的工作,类似于我使用的结构,只是你的意思是 CSS 更改(在 CodePen可能),然后我会转换它,并重新检查我是否遗漏了任何东西,它是否在我的场景中工作。如果你收回了你的down-vo-te,我也会很高兴,无论如何,谢谢,感激。 jsfiddle.net/qgpbs6mr 我使用了您的 html 和您的 css(已编译)。注意我注释了编译的css第25行并添加了第30行 TBH 在你写它的同时,我也让它工作了,你是对的,顺便说一句,我记得我在菜单部分的“a”前面尝试了一些高级过滤,但它没有不行,虽然现在它在子菜单部分“a”选择器内完成了这项工作,但我错过了在那里尝试。谢谢,如果你喜欢用你在这里提到的 2,3 行写一个答案,我会把它标记为答案。 完成。 gl 与您的项目 【参考方案1】:

我不了解 sass,但您生成的 css 是 .menu > li a:first-child 所以,它会影响所有子菜单中的所有第一个孩子。您应该生成 .menu > li > a ,这只会影响 's 内部的第一级(香水和宝石):

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

在这个fiddle 中,我使用了您的 html 和您的 css(已编译)。注意我注释了编译的css第25行并添加了第30行

【讨论】:

我想问你一件事,在菜单示例的子菜单中,没有间隙,现在它似乎以某种方式与右侧对齐。你知道是什么原因吗?在您自己的示例中,您可以看到效果。 那是因为 codepen 有他自己的“reset.css”表而 Jsfiddel 没有。当我添加所有重置规则时,请注意 jsfiddle:jsfiddle.net/avhk4eyq 如果您不想添加这些规则,只需添加 ul padding:0;(所有 HTML 列表默认都有填充) 不错,不错,没注意。

以上是关于嵌套 Sass 仅选择和影响第一级菜单锚点而不影响子菜单的主要内容,如果未能解决你的问题,请参考以下文章

用sass选择器嵌套的时候,如何表示直接子元素

Python 三级菜单与优化(一层循环嵌套)

如何仅旋转特定对象而不影响opengl中的其他对象?

如何在 SASS 中使用嵌套元素构造 BEM 修改器

如何通过样式/主题仅将颜色控制*属性应用于工具栏而不影响其余项目样式

嵌套选择器性能影响和 LESS