第N个孩子CSS - 为每2个孩子应用样式

Question

我正在尝试将第n个孩子的样式应用到每个第3个，第4个和第5个孩子，然后到第8个，第9个，第10个孩子。那么13日，14日，15日...... 因此，将样式应用于3个孩子，然后跳到孩子并将相同的样式应用于另外3个孩子等。

这是一张图片，解释了我要做的事情：将样式应用于橙子，当他们将成为数百名孩子时

Answer 1

您可以使用css的nth-of-type属性来实现上述结果。 例如：使用nth-of-type(5n+3)，我告诉css应用于从3号开始的每个第5个元素。

＆＃13;

＆＃13;

.test{
    width: 300px;
    border: 5px solid cyan;
    padding: 25px;
}
.test:nth-of-type(5n+3) {
    width: 300px;
    border: 5px solid orange !important;
    padding: 25px;
}
.test:nth-of-type(5n+4) {
    width: 300px;
    border: 5px solid orange !important;
    padding: 25px;
}
.test:nth-of-type(5n+5) {
    width: 300px;
    border: 5px solid orange !important;
    padding: 25px;
}

＆＃13;

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

＆＃13;

＆＃13;

＆＃13;

如需进一步阅读，请参阅：http://nthmaster.com/