Question

我有每个id（0,1,2,3等）的div，并且它们的宽度都是200像素，但我想为后面的div分配500px的宽度8 div，所以div 8，div 16，div 24等。

这只能用css实现，还是应该使用jquery（每个）的组合？

这就是我现在所拥有的：

div.blogbloglayout .items-row.row-0 .voucher, 
div.blogbloglayout .items-row.row-8 .voucher {
    height:500px;
}

但这应该自动完成，而不是像我上面那样。无法找到与此相关的答案。

Answer 1

您可以使用nth-child()。

我应该指出，将样式应用于容器中的第一个项目将不会遵循您的模式。您可以将div.blogbloglayout .items-row:first-child .voucher添加到选择器中。

div.blogbloglayout .items-row .voucher {
    background:#F66;
    width:200px;
}

div.blogbloglayout .items-row:nth-child(8n) .voucher {
    width:500px;
}

<div class='blogbloglayout'>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
    <div class='items-row'><div class='voucher'>Voucher</div></div>
</div>

将CSS样式应用于容器中的每个第8个元素

1 个答案: