调试第n个孩子选择

我有以下选择：调试第n个孩子选择

.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）等。

我已经在Ubuntu上测试了Firefox 3.5.8和Opera 10.10。除了CSS中的这些规则之外，也进行了测试。我使用YUI重置样式表，但不包括它什么都不做。

来源

2010-03-23 Ross

您可以发布您定位的HTML吗？ – DisgruntledGoat 2010-03-23 21:18:43

你的CSS似乎是正确的，假设下面的HTML：

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

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

foo:nth-child并不意味着“所有的元素是foo的的ñ个孩子”，而是“每ñ日foo元素”。

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

来源

2010-03-23 21:12:32

那么他们在那里工作，任何想法为什么不在我的网页？ – Ross 2010-03-23 21:15:41

发布您的网页。 – Catfish 2010-03-23 21:18:21

@Ross：就像我说的，你的HTML可能有问题。这是上面例子的一个工作演示：http://jsfiddle.net/mathias/cKr67/ – 2010-03-23 21:18:24

我猜每个.progress实际上是元素的第一个孩子。举个例子来说，所有.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; 
}

来源

2010-03-23 21:21:04 DisgruntledGoat

调试第n个孩子选择

回答

相关问题