js进阶 10-9 -of-type型子元素伪类选择器

一、总结

一句话总结：三种和first、last等有关的选择器。

1、:first和:first-child和:first-of-type的区别？

:first：单选。:first-child：多选（父元素第一个）。:first-of-type:多选（同类型第一个）；

:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；“:first-child”是选择父元素下的第1个子元素（不区分元素类型）

二、-of-type型子元素伪类选择器

1、相关知识

子元素伪类选择器

：first-child选择父元素的第1个子元素
：last-child选择父元素的最后1个子元素
：nth-child(n)选择父元素下的第n个元素或奇偶元素，n的值为"整数|odd|vevn
：only-child选择父元素中唯一的子元素（该父元素只有一个子元素）
：first-of-type选择同元素类型的第1个同级兄弟元素
：last-of-type选择同元素类型的最后1个同级兄弟元素
：nth-of-type选择同元素类型的第n个同级兄弟元素，n的值可以是"整数|odd|even"
：onlt-of-type匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script src="jquery-3.1.1.min.js"></script>
 7     <style type="text/css">
 8     </style>
 9 </head>
10 <body>
11      <div>
12         <h1>h1</h1>
13         <p>p1</p>
14         <p>p2</p>
15         <span>span1</span>
16         <span>span2</span>
17      <ul>
18         <li>1</li>
19         <li>2</li>
20         <li>3</li>
21         <li>4</li>
22         <li>5</li>
23         <li>6</li>
24         <li>7</li>
25         <li>8</li>
26         <li>9</li>
27      </ul>
28     </div>
29      <script>
30          // $('li:nth-child(3n)').css("background-color", "red")
31          // $('h1:first-child').css("background-color", "red")
32 
33          //选择择不到任何元素，p、span并不是div的第1个子元素
34          // $('p:first-child').css("background-color", "blue")
35          // $('span:first-child').css("background-color", "blue")
36 
37          //“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；“:first-child”是选择父元素下的第1个子元素（不区分元素类型）
38          $('h1:first-of-type').css("background-color", "red")
39          $('p:first-of-type').css("background-color", "red")
40          $('span:first-of-type').css("background-color", "red")
41      </script>
42 </body>
43 </html>