МИНУС: наследование Нежелательное свойство

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 должны быть жирным шрифтом, а не все дети.

EDIT: сделано 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 элементов, которые вы не хотите быть смелым, но я бы не рекомендовал это.