沒有在CSS

Question

類孩子的之間的空間，我有這樣的代碼在HTML

<div class="small_world_news"> 
 
    <div class="small_world_news_article_box"> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <div> 
 
     <img class="small_picture_world_news" src="http://placehold.it/100x100"> 
 
     <h4 class="small_title_world_news"> Doors open to Japan's new 30B industry </h4> 
 
     <ul class="author_etc"> 
 
     <li>December 14, 2016</li> 
 
     <li> 
 
      <div class="first">by</div> 
 
      <div class="blue">John Doe</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

我需要firstarticle-secondarticle和secondarticle-thirdarticle之間20px空間。另外我需要30px上一篇文章後的空間。我知道我可以製作姓名div，但我想要帶着「small_world_news_Article_box」類的孩子。 但是這個代碼沒有工作。

.small_world_news_article_box { 
    margin-bottom: 20px; 
} 

.small_world_news_article_box:last-child { 
    margin-bottom: 30px; 
} 

Answer 1

試試這個：

.small_world_news_article_box > div { 
    margin-bottom: 20px; 
} 
.small_world_news_article_box > div:last-child{ 
    margin-bottom: 30px; 
} 

Answer 2

：最後一個孩子在元素上工作了幾個不包含元素。

在你的情況下，未命名的div文章中包含的是你需要應用類的東西。所以，你需要的是：

.small_world_news_article_box > div{ 
    margin-bottom: 20px; 
    overflow: auto; 
} 
.small_world_news_article_box > div:last-child{ 
    margin-bottom: 30px; 
} 

你可以閱讀更多關於它的一切是如何在這裏工作：https://css-tricks.com/almanac/selectors/l/last-child/

Answer 3

目標像這樣的類子DIV：

.small_world_news_article_box>div { 
margin-bottom: 20px; 
} 
.small_world_news_article_box>div:last-child{ 
margin-bottom: 30px; 
} 

Codepen：http://codepen.io/dragosmicu/pen/ZeXbNY

Clearfix：

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
}