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

如此定位该类的子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;
}

Answer 2

试试这个：

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

Answer 3

：last-child对元素进行处理，其中一些不是包含元素。

在您的情况下，文章所包含的未命名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/

css中课堂上的孩子之间没有空格

3 个答案: