如何使用特定的类名向第一个div添加css属性？

我试图在第一个

中添加一个带有类“unit”的底部边距

...
... //将页边空白底部添加到这一页！！！！
...
...
#包装器相关的相册。单位：第一个孩子{margin bottom:20px；}//不起作用！！！
#包装器相关相册。单位：类型{margin bottom:20px；}的第一个//不起作用！！！

根据您的标记，有几个选项：

班级第二名儿童单元：

#包装相关相册。单位：第n个类型（2）{
#包装相关相册。单位：第n个子（2）{}

第一个元素的相邻同级（带类单元）：

#包装相关相册：第一个孩子+.unit{}

我不认为有任何方法可以简单地选择“第一个

.unit

”，但如果最后一个总是最后一个，您可以将边距添加到除最后一个之外的所有边距：

#包装相关相册。单位{页边距底部：20px；}
/*否定上述规则*/
#包装器相关相册。单位：最后一个子项{页边距底部：0px；}

更通用/灵活的解决方案 Wesley的答案适用于特定的html标记，因为它假定

.unit

将是列表中的第二个元素。所以在你的情况下，可能是这样的，他的解决方案很有效。但是，如果有人正在寻求更普遍的解决方案，则应采取以下措施：

#包装相关相册。单位{
/*第一个的代码*/
边缘底部：20px；
}
#包装器相关相册.unit~.unit{
/*以下所有项目的代码*/
边缘底部：0px；
}

---

像这样使用通用同级选择器（

~

）将覆盖除第一个

.unit

之外的所有内容，从而允许第一个

.unit

位于包装器中的任何位置（不仅在位置2，而且不需要事先知道位置）

它有一个id。为什么不使用它？

：类型的第一个只在元素选择器上工作，而不在类上工作。为什么需要将底部边距添加到此元素？在父元素的子元素列表中查找属于其类型的第一个同级元素，并表示属于某些其他元素的第一个子元素的元素-忽略属性。使用#wrapper related albums div.unit，它们都会获得边距。。。我只想要与div.wrapper相关的相册的第一个.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!!!