CSS3 第 N Child 次排序

Question

我正在寻找使用 nth-child 的目标元素，有 3 种颜色（grey-1、grey-2 和 grey-3）。

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

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

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

更改 dom

Answer 1

MDN - nth-child

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

为了 select 每三个元素，您将使用 :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 第 N Child 次排序

CSS3 Nth Child ordering

css

css-selectors