调试第n个子选择器

您的CSS似乎是正确的,假设如下HTML:

<div class="progress">1</div>
<div class="progress">2</div>
<div class="progress">3</div>

也许你误解了 :nth-child 和HTML/CSS的组合不正确。

foo:nth-child 并不意味着每个元素都是 n 孩子的 foo _,但_每 n 钍 福 元素_

提示:使用 the :nth-child() tester . 或者这个: http://leaverou.me/demos/nth.html

我猜每发生一次 .progress 实际上是元素的第一个子元素。为了让您的示例起作用,所有 进展 元素必须是同级的。

也就是说,这将起作用:

<div class="progress">1</div>
<div class="progress">2</div>
<div class="progress">3</div>

…但这不会:

<div><span class="progress">1</span></div>
<div><span class="progress">2</span></div>
<div><span class="progress">3</span></div>

在这种情况下,你需要移动 progress 类到 <div> 然后使用这个CSS:

.progress:nth-child(3n+1) span {
    background: teal;
}