Question

我有一组div，像这样

<div class="row header"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<!-- add spacing here by adding margin to the row above -->
<div class="row header"></div>
<div class="row"></div>
<div class="row"></div>

由于我无法更改标记，我想知道是否可以在.row和.row.header之间添加空格而不对其他div进行任何更改。理想情况下，我需要将margin-bottom添加到.row之前的每个.row.header。

在没有添加额外的类和黑客的情况下，CSS是否可以实现？

Answer 1

您可以使用adjacent sibling selector：

.row + .row.header {
   margin-top: 20px;
}

这只会为.row.header元素之后的.row元素添加上边距，确保第一个.row.header元素不受影响。

Answer 2

正如本回答https://stackoverflow.com/a/1817801/2894798所示，css中没有兄弟选择器，我建议将余量添加到.row.header

.row + .row.header{
margin-top:20px;
}

Answer 3

使用row和header类为div添加上边距会更容易

.row.header {
 margin-top: 5px;
}

Answer 4

If you want apply margin only where is the comment is written you can add css for that as follows

div.row:nth-of-type(4) {
   margin-bottom: 20px;
}

but if you want add margin to every 3'd div after .header, you need to apply css as follows

div.row:nth-of-type(4n) {
  margin-bottom: 20px;
}

希望这将满足您的要求。

Answer 5

如果:not()是其父级的第一个孩子，您也可以使用.row.header选择器。对于more info.

.row.header:not(:first-child) { 
    margin-top: 10px;
}

如何设计一对元素？

5 个答案: