jQuery :first-of-type 选择器

实例

选择作为属于其父元素的第一个 <p> 元素的所有 <p> 元素:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7. $("p:first-of-type").css("background-color", "yellow");
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <p>body 中的第一个段落</p>
  13. <div style="border:1px solid;">
  14. <p>div 中的第一个段落</p>
  15. <p>div 中的最后一个段落</p>
  16. </div>
  17. <div style="border:1px solid;">
  18. <span>这是一个 span 元素.</span>
  19. <p>另一个 div 中的第一个段落</p>
  20. <p>另一个 div 中的最后一个段落</p>
  21. </div>
  22. <p>body 中的最后一个段落</p>
  23. </body>
  24. </html>

定义与用法

:first-of-type 选择器选择作为其父元素的第一个子元素(特定类型)的所有元素。

提示: 这个选择器与 :nth-of-type(1) 类似。

提示:使用 :last-of-type 选择器选择属于父元素的特定类型的最后一个子元素。


语法

  1. $(":first-of-type")

更多实例

选择所有 <div> 元素中的第一个 <p> 元素

如何选择所有 <div> 元素中的第一个 <p> 元素。

:first-child 与 :first-of-type 选择器的不同点

演示 :first-child:first-of-type 选择器的不同点

分类导航