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

Question

我有每个id(0,1,2,3等)的div,它们都有200 px的宽度,但是我想为8 div之后的div分配500px的宽度,所以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>