少CSS繼承

Question

Let's說我有這樣一個類：

.navigation{ 
    display: block; 
    ul li{ 
     float: left; 
     a{display: block;} 
    } 

} 

..和以下標記：

<nav> 
    <ul> 
     <li><a href="#">Link One</a></li> 
     <li><a href="#">Link Two</a></li> 
    </ul> 
</nav> 

現在，我想格式化我的導航與我剛剛上課。所以，我會做這樣的：

nav{.navigation;} 

我的問題是：我不能做「UL」和它的子元素如我所料繼承性。只有「nav」標籤纔會顯示「display：block」屬性，但其他元素保持不變。

有沒有什麼辦法像Lesscss一樣重用類？

Answer 1

這是不正確的用法。如果你想使用較少，所以的.navigation是不是一類，但混入（的.navigation（））

.navigation(){ 
    display: block; 
    ul{ 
     li{ 
      float: left; 
      a{ 
      display: block; 
      } 
     } 
    } 
} 

然後調用這個混入

nav{.navigation;} 

另一種選擇是沒有階級使用：

nav{ 
    display: block; 
    ul{ 
     li{ 
     float: left; 
     a{ 
      display: block; 
     } 
     } 
    } 
} 

或與類：

<nav class="navigation"> 
<ul> 
    <li><a href="#">Link One</a></li> 
    <li><a href="#">Link Two</a></li> 
</ul> 

.navigation{ 
    display: block; 
    ul{ 
     li{ 
      float: left; 
      a{ 
       display: block; 
      } 
     } 
    } 
}