少：不需要的财产继承

css
less

2017-02-20 107 views 0 likes

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。

来源

2017-02-20 meandeveloper111

回答

首先，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，但我不会建议。

来源

2017-02-20 18:23:12

谢谢队友！ :) – meandeveloper111

少：不需要的财产继承

回答

相关问题