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>