4

I'm trying to add a bottom margin to the first <div> with a class "unit".

<div id="wrapper-related-albums">
   <div class="header">...</div>
   <div class="unit">...</div> //add margin-bottom to this one!!!!
   <div class="header">...</div>
   <div class="unit">...</div>
</div>



#wrapper-related-albums .unit:first-child {margin-bottom:20px;} // doesn't work!!!
#wrapper-related-albums .unit:first-of-type {margin-bottom:20px;} // doesn't work!!!
4

2 回答 2

4

更通用/灵活的解决方案

Wesley 的答案非常适合您的特定 html 标记，因为它假定.unit将成为列表中的第二个元素。所以在你的情况下，可能是这样，他的解决方案效果很好。但是，如果有人正在寻求更通用的解决方案，则应该执行以下操作：

#wrapper-related-albums .unit { 
    /* code for the first one */ 
    margin-bottom: 20px;
}
#wrapper-related-albums .unit ~ .unit { 
    /* code for all the following ones */ 
    margin-bottom: 0px;
}

像这样使用通用的同级选择器 ( ~) 将覆盖除 first 之外的所有选择器.unit，允许 first.unit位于包装器中的任何位置（不仅仅是位置#2，并且不需要提前知道该位置）。这是一个使用更改来说明它的小提琴。color

于 2013-06-04T20:22:28.443 回答
2

有几个选项，具体取决于您的标记：

第二个孩子与班级单位：

#wrapper-related-albums .unit:nth-of-type(2) { }
#wrapper-related-albums .unit:nth-child(2) { }

第一个元素的相邻兄弟（带有类单元）：

#wrapper-related-albums :first-child + .unit {  }

我不相信有任何方法可以简单地选择“第一个.unit”，但是您可以将边距添加到除最后一个之外的所有边距，如果它总是落在最后一个：

#wrapper-related-albums .unit { margin-bottom: 20px; }

/* negate the above rule */
#wrapper-related-albums .unit:last-child { margin-bottom: 0px; }
于 2013-06-04T19:34:21.327 回答