嵌套Sass只選擇和影響一級選單錨而不是子選單-有解無憂

在這里，我試圖為頂級選單欄提供與子選單項不同的高度。

似乎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 選擇器。

完整代碼： 代碼在這里

uj5u.com熱心網友回復：

我不知道 sass 但你生成的 css 是 .menu > li a:first-child 所以，它會影響所有子選單中的所有第一個孩子。您應該生成 .menu > li > a {}，這只會影響 's 內部第一級（香水和寶石）：

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

在這個小提琴中，我使用了您的 html 和 css（已編譯）。注意我注釋了編譯的 css 行 25 并添加了行 30

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390295.html

標籤：css 蠢货 css-选择器

上一篇：javascriptif/else陳述句適用于前兩個陳述句，但在第三個陳述句中停止？

下一篇：投資組合網站不適合較小的設備