子元素伪类选择器，就是选择某一个元素下面的子元素的方式。选择子元素，在jQuery中是很常用的操作。jQuery为我们提供了大量选择子元素的方式，使得我们操作元素更加的方便快捷。
在jQuery中，子元素伪类选择器分为2大类。
| 选择器 | 说明 |
|---|---|
| :first-child | 选择父元素的第1个子元素 |
| :last-child | 选择父元素的最后1个子元素 |
| :nth-child(n) | 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even” |
| :only-child | 选择父元素中唯一的子元素（该父元素只有一个子元素） |
下面我们通过几个实例，来让大家深刻地理解这些选择器。
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html><head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; width:200px; list-style-type:none; } li{height:20px;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("ul li:first").css("background-color", "red"); $("ul li:nth-child(2)").css("background-color", "orange"); $("ul li:nth-child(3)").css("background-color", "yellow"); $("ul li:nth-child(4)").css("background-color", "green"); $("ul li:last").css("background-color", "blue"); }) </script></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html> |
在浏览器预览效果如下：
分析：
$("ul li:first")表示选择ul元素下的第1个li元素。其实$("ul li:first")也等价于$("ul li:nth-child(1)")。$("ul li:last")表示选择ul元素下的最后一个元素，在这个例子中也等价于$("ul li:nth-child(5)")。
没有接触子元素伪类选择器的同学，如果要操作某一个元素的子元素，往往都是给该子元素添加一个id或者class。但是这样会导致id或class泛滥成灾，影响HTML结构，使得代码难以维护。不过有了子元素伪类选择器，我们可以轻松地进行选择操作。
学过CSS3的小伙伴就会问了，上面的效果用CSS操作岂不是来得更简单些？废话，当然是啦。大家在后面的学习中，特别是入门阶段的实例，很多时候我们重在讲解知识概念，而不会在乎哪个方法更好。如果实例能够帮助大家理解该知识点，目的就达到了。对于知识的实践部分，我们都会在进阶教程都会介绍，大家不用担心。此外，关于CSS3的学习，大家可以关注我们的CSS3教程。
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html><head> <title></title> <style type="text/css"> *{padding:0;margin:0;} ul { display:inline-block; width:200px; list-style-type:none; } li{height:20px;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { //设置奇数列的背景颜色 $("ul li:nth-child(odd)").css("background-color", "red"); //设置偶数列的背景颜色 $("ul li:nth-child(even)").css("background-color", "red"); }) </script></head><body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></body></html> |
在浏览器预览效果如下：
分析：
$("ul li:nth-child(odd)")表示选择ul元素下奇数的li元素，$("ul li:nth-child(even)")表示选择ul元素下偶数的li元素。
| 选择器 | 说明 |
|---|---|
| :first-of-type | 选择同元素类型的第1个同级兄弟元素 |
| :last-of-type | 选择同元素类型的最后1个同级兄弟元素 |
| :nth-of-type | 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even” |
| :only-of-type | 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素） |
对于这些选择器，我们一定要结合实例来理解其定义。其实，这2类子元素伪类选择器在形式上非常相似的，但是却有着本质上的区别。
“第1类选择器不分元素类型，第2类选择器区分元素类型。”大家一定要记住这句话，对于你区分和理解这2类选择器极其重要。除此之外，我们仔细观察会发现，第2类选择器的命名上都有一个“type”（元素类型），这还给我们带来了一个记忆小技巧。
下面我们通过具体实例，来帮助大家真正去理解这2类子元素伪类选择器。
1 2 3 4 5 6 | <div> <h1></h1> <p></p> <span></span> <span></span></div> |
h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。
span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；
h1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素。
p: first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素。
span: first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，这里我们选择的是两个span中的第1个。
总结：
①“:first-child”是选择父元素下的第1个子元素（不区分元素类型），而“:first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）；
②“:last-child”和“:last-of-type”、“nth-child（n）”和“:nth-of-type（n）”的使用原理跟“:first-child”和“:first-of-type”是一样的，大家试着想一下另外几个用在这个例子上的区别。
在“:only-child选择器”中，父元素是只有一个子元素的。但是在“:only-of-type选择器”中，却可以有多个子元素。“:only-of-type”相对“:only-child”来说，只是多了一个type（元素类型）的限制。
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><head> <title></title> <style type="text/css"> /*去除所有元素默认外边距以及内边距*/ *{padding:0;margin:0;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("div p:only-child").css("background-color", "red"); }) </script></head><body> <div> <p>这是一个段落</p> </div> <div> <p>这是一个段落</p> <span>这是一个span</span> </div></body></html> |
在浏览器预览效果如下：
分析：
对于“:only-child选择器”来说，其父元素下面只能有一个子元素。在这个例子中，第1个div元素内部只有一个子元素，因此被选中。第2个div元素有2个子元素（p和span），因此没有被选中。
当我们把$("div p:only-child")改为$("div p:only-of-type")时，在浏览器预览效果如下，大家仔细琢磨一下原因。
联系客服
