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>