如何将css属性添加到具有特定类名的第一个div ?

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

我正在尝试为第一个

添加一个类“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!!!

2 个解决方案

#1

There's a few options, depending on your markup:

根据您的标记，这里有几个选项:

Second child with class unit:

二孩与班级单位:

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

Adjacent sibling (with class unit) of the first element:

第一个元素的邻接兄弟(带有类单元):

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

I don't believe there's any way to simply select "the first .unit", but you can add the margin to all except the last one, if it always falls last:

我不认为有任何方法可以简单地选择“第一个。unit”，但如果它总是落在最后一个，那么你可以在除最后一个之外的所有地方加上空白:

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

/* negate the above rule */
#wrapper-related-albums .unit:last-child { margin-bottom: 0px; } 

#2

More General/Flexible Solution

Wesley's answer serves well for your particular html markup, as it assumes the .unit is going to be the second element in the listing. So in your case, that may be so, and his solution works well. However, if someone were seeking a more general solution the following is what should be done:

韦斯利的答案适用于特定的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;
}

Using the general sibling selector (~) like this will override all but the first .unit, allowing the first .unit to be anywhere in the wrapper (not just in position #2, and the position need not be known in advance). Here's a fiddle that illustrates it using a color change.

像这样使用通用的同胞选择器(~)将覆盖除第一个.unit之外的所有内容，允许第一个.unit位于包装器中的任何位置(不只是位置#2，而且位置不需要预先知道)。这里有一个小提琴用颜色变化来说明它。