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

时间:2014-11-12 06:51:02

标签: html css css-selectors

我有一组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。

4 个答案:

答案 0 :(得分:12)

如果我理解正确,您需要选择:

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

为此您可以使用:

&#13;
&#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;
&#13;
&#13;

感谢@SureshPonnukalaiJSFiddle

答案 1 :(得分:0)

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

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

答案 2 :(得分:-1)

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

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

答案 3 :(得分:-1)

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