代码之家 › 专栏 › 技术社区 › Ross

调试第n个子选择器

css-selectors css

1

Ross · 技术社区 · 16 年前

我有以下选择器:

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

.progress:nth-child(3n+2) {
    background: red;
}

.progress:nth-child(3n+3) {
    background: blue;
}

然而,所有的项目都以青色背景结束。这些选择器是否正确?我想我应该得到:

青色(每3个,从1开始)
红色(每3个,从2开始)
蓝色(每3个,从3开始) 等。

我已经在火狐3.5.8和Ubuntu上的Opera10.10上进行了测试。在CSS中只使用这些规则进行测试。我正在使用yui重置样式表,但是排除它什么也不做。

2 回复 | 直到 16 年前

1

4

Mathias Bynens 16 年前

您的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

2

DisgruntledGoat 16 年前

我猜每发生一次 .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;
}