只是一篇简短的文章,说明我已更新了 :nth 测试器 页面,希望它比以前更有用。该页面的目的是以交互方式学习选择器:nth-child、:nth-of-type、:nth-last-child和:nth-last-of-type 的工作原理。
在此更新中,我
- 使其实际注入 CSS(使用 此方法),而不是使用 jQuery 模拟选择。这意味着如果真实的 CSS 实现中存在错误或其他问题,这将准确地显示出来。
- 有一些嵌套列表和其他嵌套元素,因此您可以了解选择如何在更复杂的情况下工作。
- 有更多选择。您现在可以选择不仅仅是 :nth-child,还可以定位不同的元素。
- 有一些可点击的“示例”(松散地基于 这篇文章),因此您可以快速查看使用 :nth 进行的一些有趣选择的示例。
感谢 Lea Verou,她一直拥有 一个比我更好的 版本。我只是想尝试一下自己的版本并将其更新。

Chris,链接无法使用。怎么回事?
对我来说工作正常……
非常有用的演示!我有时会绞尽脑汁试图弄清楚它 :P
你的演示页面给我显示了一个水平滚动条,显然是 #demo-top-bar 的问题 :P(Chrome 22.0.1229.94,Win7)
毫无疑问,Chris 的 :nth 示例页面是网络上最有帮助的 CSS 页面之一。
它必须是我书签列表中使用频率最高的书签。
非常感谢你,伙计。
这种东西非常有用。如果你不了解 :nth,它可能会有点陌生。感谢分享!
一年前我制作了一个类似的测试器 http://www.w3systems.pl/demo/pseudoclasses.html
@ksh 你的测试器也非常好 :) 做得好。
谢谢@Carlos
太棒了!非常感谢你分享。
“示例”不是“Recipies”
除非我错过了某个笑话或其他东西……
不,我只是拼写错误。
谢谢,非常有用的演示。
干杯,Chris,
像这样的实际示例比一页文字更能说明 nth-child 的操作。我一定会使用这个资源!
谢谢 Chris,我加了书签 :D
非常有用。我的开发者工具箱里又多了一个工具。
感谢你让我们的生活更轻松。
太棒了。Chris,干得好!一个小小的请求——如果你能添加一个重置按钮来清除选择,那就太好了。我知道用户可以在括号中输入“0”来实现相同的效果,但按钮会让它更容易。
感谢你提供这个!在涉及到 nth-* 的时候,我真的很迷茫!
每次我使用 nth-* 时,我都会想:哦,是的,我明白了它是如何工作的。但这从来都不是真的 :D