选择第n个子元素，选择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>

我想给

1、2、5、6、9、10

等的背景颜色提供支持。如何使用nth选择器选择特定的

元素？这可行吗？

注：div的数量可能会增加到n。

- Vyas Rao

---

抱歉，描述是正确的。 - Vyas Rao

可能是重复的问题：CSS选择器：如何通过一对一对地样式化项目[1-2][5-6][9-10]等 - davidcondrey

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。

- Vucko

---

@SureshPonnukalai 我刚喝完咖啡，所以我脑子特别活跃 :D - Vucko

@VyasRao 没关系 :) 不要自责，每个人都会犯一些简单的错误 :) - Vucko

Answer 2

这个方程式将会给你一个序列。

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

- davidcondrey

---

显然，它被称为表达式而不是方程。我知道这很迂腐。 - PiggyMacPigPig

Answer 3

你可以使用 nth-child 概念来完成这个。

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

- KiV

---

抱歉，这不符合要求。 - Hello Universe

Answer 4

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

- Romeo Ching

---

这是一条注释，不应该被用作答案。 - Hello Universe