jQuery - 选择器（三）
jQuery选择器的第三部分是子过滤选择器（child filter），主要包括一下几个：
:first-child 匹配父元素中的第一个子元素。
:last-child 匹配父元素中的最后一个子元素。
:nth-child 匹配其父元素下的第N个子或奇偶元素。
:only-child 如果父元素中只包含一个子元素则符合匹配。
上一节中有:first 选择器，这个选择器选择的只是一个单一的对象，而:first-child选择器可以选择多个对象，例如选择多个<ul>中的第一个<li>元素，他和:nth-child(1)相同。:last-child选择器同理。
:only-child选择器可以这样理解：我有多个<ul>标签，每个<ul>中包含的<li>个数不同，如果我使用这个选择器后就只能找到包含一个<li>的<ul>中的<li>。（想了好几个解释方法但都有点绕）
:first-child :last-child :only-child的例子
1 <!doctype>
2 <html>
3 <head>
4 <style>
5 ul,li{
6 list-style:none;
7 width:200px;
8 }
9 </style>
10 <script src="jquery/jquery.js"></script>
11 <script>
12 $(document).ready(
13 function(){
14 $("ul li:first-child").css("border","1px solid blue");
15 $("ul li:only-child").css("color","blue");
16 $("ul li:last-child").css("border","1px solid red");
17 }
18 )
19 </script>
20 </head>
21 <body>
22 <ul>
23 <li>ul1-li1</li>
24 <li>ul1-li2</li>
25 <li>ul1-li3</li>
26 <li>ul1-li4</li>
27 </ul>
28 <ul>
29 <li>ul2-li1</li>
30 <li>ul2-li2</li>
31 <li>ul2-li3</li>
32 <li>ul2-li4</li>
33 </ul>
34 <ul>
35 <li>ul3-li1</li>
36 </ul>
37 <ul>
38 <li>ul4-li1</li>
39 </ul>
40 </body>
41 </html>
:nth-child选择器灵活性比较大，完整结构是$(":nth-child(index/even/odd/equation)")。他的参数可以使用索引、前面介绍的even、odd、以及方程式（2n,3n或者2n-1）。
:nth-child的例子：
1 <!doctype>
2 <html>
3 <head>
4 <style>
5 ul,li{
6 list-style:none;
7 width:200px;
8 }
9 </style>
10 <script src="jquery/jquery.js"></script>
11 <script>
12 $(document).ready(
13 function(){
14 $("#ul1 li:nth-child(1)").css("border","1px solid blue");
15 $("#ul2 li:nth-child(even)").css("background","blue");
16 $("#ul3 li:nth-child(odd)").css("background","blue");
17 $("#ul4 li:nth-child(3n)").css("background","blue");
18 }
19 )
20 </script>
21 </head>
22 <body>
23 <ul id="ul1">
24 <li>ul1-li1</li>
25 <li>ul1-li2</li>
26 <li>ul1-li3</li>
27 <li>ul1-li4</li>
28 </ul>
29 <ul id="ul2">
30 <li>ul2-li1</li>
31 <li>ul2-li2</li>
32 <li>ul2-li3</li>
33 <li>ul2-li4</li>
34 </ul>
35 <ul id="ul3">
36 <li>ul3-li1</li>
37 <li>ul3-li2</li>
38 <li>ul3-li3</li>
39 <li>ul3-li4</li>
40 </ul>
41 <ul id="ul4">
42 <li>ul4-li1</li>
43 <li>ul4-li2</li>
44 <li>ul4-li3</li>
45 <li>ul4-li4</li>
46 <li>ul4-li5</li>
47 <li>ul6-li6</li>
48 </ul>
49 </body>
50 </html>
