html - 选择第 n 个 child 选择 1、2、5、6、9、10 等

Question

我有一组div如下，

<div class="selector">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

我想为 div 1、2、5、6、9、10 等提供背景颜色。如何使用第 n 个选择器选择特定的 div？可能吗？

PS:div的个数可能会增长到n个。

Answer 1

如果我没理解错的话，你想选择:

1 2 3 4 5 6 7 8 9 10 ...
+ +     + +     +  + ...

为此你可以使用:

.selector>div:nth-child(4n+1), .selector>div:nth-child(4n+2){
    background-color:red;
}

<div class="selector">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

谢谢 @SureshPonnukalai对于JSFiddle .