html - 覆盖 margin 崩溃

我有一个带4个子元素的div。每个孩子底部都有5倍的边距。我似乎不能给最后一个孩子加上一个更大的margin-top（或者说，前面的孩子加上一个更大的margin-bottom）。查看我的fiddle。
我试着在最后一个子项中添加一个顶部边框和顶部填充，以及更改容器的溢出设置，但没有成功。有什么建议吗？

#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;
}

<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>

最佳答案

问题是CSS specificity。
选择器#header div比选择器#blurb更具体。
更准确地说，选择器#header div的specificity calculation为0, 1, 0, 1，而选择器#blurb为0, 1, 0, 0。
如果希望选择器覆盖其他样式，则需要增加选择器的特殊性。
例如：(updated example)

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

选择器也可以工作。

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

值得一提的是，您还可以使用#blurb或#header #blurb伪类来选择最后一个元素：

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