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 ...
+ +     + +     +  + ...

为此您可以使用：

＆＃13;

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

＆＃13;

<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>

＆＃13;

感谢@SureshPonnukalai的JSFiddle。

Answer 2

这个等式将为您提供序列..

2n+[((-1)^(n+1))-3]/2

Answer 3

您可以使用第n个孩子概念。

div.selector:nth-child(2) {
    background: #ff0000;
}

Answer 4

我认为使用nth-child因IE8兼容性不好。最好使用+符号li + li或者添加每个div的类。

选择第n个孩子选择1,2,5,6,9,10等

4 个答案: