Question

我希望使用nth-child定位元素，有3种颜色（灰色-1，灰色-2和灰色-3）。

在第四个元素上，我希望颜色循环，例如

灰色-1
灰色-2
灰色-3
灰色-1
灰色-2
灰色-3

最有效的方法是什么，我可以选择使用jQuery，但更喜欢使用CSS3。列表可能很长，这就是为什么我不想用.addClass（）更改dom。

Answer 1

MDN - nth-child

:nth-child(an+b) CSS伪类匹配文档树中具有an+b-1兄弟节点的元素，对于n的给定正值或零值，并且具有父元素。更简单地说，选择器匹配许多子元素，子元素系列中的数字位置与模式an+b匹配。

为了选择每个第三个元素，您将使用:nth-child(3n)。相应地增加b，以便定位所有元素:nth-child(3n+1)，:nth-child(3n+2)，:nth-child(3n+3)：

Example Here

div:nth-child(3n+1) {
    background: #ccc;
}
div:nth-child(3n+2) {
    background: #ddd;
}
div:nth-child(3n+3) {
    background: #eee;
}

div {
    height: 20px;
}
div:nth-child(3n+1) {
    background: #ccc;
}
div:nth-child(3n+2) {
    background: #ddd;
}
div:nth-child(3n+3) {
    background: #eee;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Answer 2

假设元素是公共容器的直接子元素（例如li 的ul子元素），您可以

li:nth-child(3n+1) {
  color: green
}
li:nth-child(3n+2) {
  color: blue
}
li:nth-child(3n+3) {
  color: red
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

CSS3 Nth Child订购

2 个答案: