更新::nth 测试器

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200美元免费额度!

只是一篇简短的文章,说明我已更新了 :nth 测试器 页面,希望它比以前更有用。该页面的目的是以交互方式学习选择器:nth-child、:nth-of-type、:nth-last-child:nth-last-of-type 的工作原理

在此更新中,我

  • 使其实际注入 CSS(使用 此方法),而不是使用 jQuery 模拟选择。这意味着如果真实的 CSS 实现中存在错误或其他问题,这将准确地显示出来。
  • 有一些嵌套列表和其他嵌套元素,因此您可以了解选择如何在更复杂的情况下工作。
  • 有更多选择。您现在可以选择不仅仅是 :nth-child,还可以定位不同的元素。
  • 有一些可点击的“示例”(松散地基于 这篇文章),因此您可以快速查看使用 :nth 进行的一些有趣选择的示例。

感谢 Lea Verou,她一直拥有 一个比我更好的 版本。我只是想尝试一下自己的版本并将其更新。

tester
去玩吧。