少：不需要的財產繼承

Question

我定義如下：

ul.menu-level1 { 
 

 
     li.menu-level1-item { 
 
      font-size: @font-size-large; 
 

 
      &.active { 
 
       font-weight: bold; 
 
      } 
 
     } 
 
    } 
 

 
    div.menu-level2 { 
 

 
    }

\t <ul class="menu-level1"> 
 
\t \t <li class="menu-level1-item"><a href="/">some</a></li> 
 
\t \t <li class="menu-level1-item has-submenu active"><a href="/">some</a> 
 
\t \t \t <div class="menu-level2"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li class="menu-level2-item"><a href="/">some</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </li> 
 
\t </ul>

但儘管如此，該項目menu-level2越來越font-weight: bold，因爲他們從menu-level1繼承。

我在做什麼錯？

我想達到的目標：只有menu-level1-item active元素應該是大膽的，而不是所有的小孩。

編輯：製造ul.menu-level2至div.menu-level2。

Answer 1

首先，ul.menu-level2不正確。您正在分配是class到div元素，而不是ul，所以應該是

div.menu-level2 {} 

至於繼承的話，你可以這樣做

ul.menu-level1 { 
    li.menu-level1-item { 
    font-size: @font-size-large; 

    &.active { 
     > a { 
     font-weight: bold; 
     } 
    } 
    } 
} 

嵌套額外a只會限制你的menu-level1a標記爲bold而不是子元素。

如果你不想這樣做，那麼你需要爲menu-level2添加另一個選擇器，並指定爲font-weight: normal;您不希望那些大膽的元素li，但我不會建議。