我有div4个子元素。每个孩子的底部都有5px的边距。我似乎无法margin-top为最后一个孩子添加一个较大的值（或等效地，为margin-bottom前一个孩子添加一个较大的值）。看看我的小提琴。
我尝试为最后一个孩子添加顶部边框和顶部填充，以及更改容器的溢出设置而没有运气。有小费吗？
#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特异性。
选择器#header div比选择器更具体#blurb。
更精确地说，选择器#header div的特异性计算为0, 1, 0, 1，而选择器#blurb为0, 1, 0, 0。
#blurb如果要使选择器覆盖其他样式，则需要提高选择器的特异性。
例如：（更新示例）
#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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句