無法理解div元素

Question

我有兩個div元素和nav > nav_1。我期待看到500x500黑色背景和50x50左上角的藍色區域，但不是隻顯示我500x500黑色區域。我怎麼解決它？

.nav { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: black; 
 
} 
 
.nav.nav1 { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
}

<div class="nav"> 
 
    <div class="nav_1"> 
 
    </div> 
 
</div>

都在你的CSS的

Answer 1

首先，你用.nav1代替.nav_1。其次在.nav和.nav_1之間放置一個空格。試試這個：

.nav .nav_1{ 
    height:50px; 
    width:50px; 
    background-color:blue; 
    } 

這裏是一個Fiddle爲相同。

編輯： 對於獲得的50像素的保證金頂，試試這個：

.nav{ 
height:500px; 
width:500px; 
background-color:black; 
position:fixed; /* fix position of .nav div */ 
} 

.nav .nav_1{ 
    height:50px; 
    width:50px; 
    background-color:blue; 
    margin-top: 50px ; /* put margin-top to 50px */ 
} 

這裏是Updated Fiddle的一樣。