Question

我有一个包含4个子元素的div。每个孩子的底部都有5px的边距。我似乎无法向最后一个孩子添加更大的margin-top（或者相当于前一个孩子的margin-bottom更大）。看看我的fiddle。

我已经尝试为最后一个孩子添加顶部边框和顶部填充，以及更改容器的溢出设置而没有运气。有什么提示吗？

＆＃13;

#header {
  display: flex;
  flex-flow: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
#header div {
  padding: 0;
  margin: 0 0 5px 0;
}
#blurb {
  margin-top: 50px;
}

＆＃13;

<div id="header">
  <div id="greeting">
    content
  </div>
  <div id="title">
    content
  </div>
  <div id="subtitle">
    content
  </div>
  <div id="blurb">
    content (top margin doesn't change!)
  </div>
</div>

＆＃13;

Answer 1

问题是CSS specificity。

选择器#header div比选择器#blurb更具体。

更准确地说，选择器#header div的{{3}}为0, 1, 0, 1，而选择器#blurb为0, 1, 0, 0。

如果您想要覆盖其他样式，则需要增加选择器#blurb的特异性。

例如：specificity calculation

#header div {
    padding: 0;
    margin: 0 0 5px 0;
}
div#blurb {
    margin-top: 50px;
}

选择器#header #blurb也可以。

#header #blurb {
    margin-top: 50px;
}

为了它的价值，您还可以使用:last-child或:last-of-type伪类来选择最后一个元素：

#header div:last-of-type {
    margin-top: 50px;
}

Answer 2

如果您想为最后一个孩子设置一些风格，请使用last-child选择器：

#header {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding: 10% 0 0 10%;
  box-sizing: border-box;
  overflow: hidden;
}
#header div {
  padding: 0;
  margin: 0 0 5px 0;
}
#header div:last-child {
  margin-top: 50px;
}

<div id="header">
  <div id="greeting">
    content
  </div>
  <div id="title">
    content
  </div>
  <div id="subtitle">
    content
  </div>
  <div id="blurb">
    content
  </div>
</div>

覆盖保证金崩溃

2 个答案: