html – nth-child没有按预期工作

前端之家收集整理的这篇文章主要介绍了html – nth-child没有按预期工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我将div与我使用nth-child的对象一起添加时,它似乎变得越来越多.

我会感激任何帮助.

  1. <html>
  2. <style>
  3. .documents > a:nth-child(2) {
  4. border:1px solid red;
  5. }
  6. </style>
  7.  
  8. <div class="documents">
  9. <!-- NO DIVS: WORKS FINE -->
  10. <a href="#">Test</a>
  11. <a href="#">Test</a>
  12. <a href="#">Test</a>
  13. <a href="#">Test</a>
  14. </div>
  15. <br />
  16. <div class="documents">
  17. <div></div><!-- ONE DIV: STARTS WITH THE FIRST OBJECT -->
  18. <a href="#">Test</a>
  19. <a href="#">Test</a>
  20. <a href="#">Test</a>
  21. <a href="#">Test</a>
  22. </div>
  23. <br />
  24. <div class="documents">
  25. <div></div><div></div><!-- TWO DIVS: DOES NOT WORK -->
  26. <a href="#">Test</a>
  27. <a href="#">Test</a>
  28. <a href="#">Test</a>
  29. <a href="#">Test</a>
  30. </div>
  31. </html>

http://jsfiddle.net/nwrhU/

解决方法

这不是错误的行为;对于如何:nth-​​child()的工作原理只是一种常见的误解.

当你将div元素添加到开头时,你正在寻找的a不再是整体的第二个孩子(这就是:nth-​​child(2)的意思).这是因为当你添加一个div时,它会成为第一个孩子;反过来,第一个成为第二个孩子,第二个成为第三个孩子.当你添加第二个div时,该div成为第二个子节点,并且a元素同样会向前推进另一个步骤,因此a:nth-​​child(2)不再匹配任何内容.

如果您正在寻找第二个a而不管其兄弟姐妹中的任何其他元素类型,请使用:nth-​​of-type(2).

猜你在找的HTML相关文章