2-11 jQuery选择器之子元素筛选选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之子元素筛选选择器

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表：

注意事项：

  1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
  3. 如果子元素只有一个的话，:first-child与:last-child是同一个
  4.  :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
  5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
  6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

任务

在代码编辑器中第33行填写相应代码

$('.first-div a:first-child')

在代码编辑器中第40行填写相应代码

$('.first-div a:last-child')

在代码编辑器中第45行填写相应代码

$('.first-div a:only-child')

在代码编辑器中第71行填写相应代码

$('.last-div a:nth-child(2)')

在代码编辑器中第76行填写相应代码

$('.last-div a:nth-last-child(2)')
index.htmlimooc.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <h2>子元素筛选选择器</h2>
  13.     <h3>:first-child、:last-child、:only-child</h3>
  14.     <div class="left first-div">
  15.         <div class="div">
  16.             <a>:first-child</a>
  17.             <a>第二个元素</a>
  18.             <a>:last-child</a>
  19.         </div>
  20.         <div class="div">
  21.             <a>:first-child</a>
  22.         </div>
  23.         <div class="div">
  24.             <a>:first-child</a>
  25.             <a>第二个元素</a>
  26.             <a>:last-child</a>
  27.         </div>
  28.     </div>
  29.  
  30.     <script type="text/javascript">
  31.         //查找class="first-div"下的第一个a元素
  32.         //针对所有父级下的第一个
  33.         ?.css("color", "#CD00CD");
  34.     </script>
  35.  
  36.     <script type="text/javascript">
  37.         //查找class="first-div"下的最后一个a元素
  38.         //针对所有父级下的最后一个
  39.         //如果只有一个元素的话，last也是第一个元素
  40.         ?.css("color", "red");
  41.     </script>
  42.  
  43.     <script type="text/javascript">
  44.         //查找class="first-div"下的只有一个子元素的a元素
  45.         ?.css("color", "blue");
  46.     </script>
  47.  
  48.  
  49.     <h3>:nth-child、:nth-last-child</h3>
  50.     <div class="left last-div">
  51.         <div class="div">
  52.             <a>:first-child</a>
  53.             <a>第二个元素</a>
  54.             <a>第三个元素</a>
  55.             <a>:last-child</a>
  56.         </div>
  57.         <div class="div">
  58.             <a>:first-child</a>
  59.             <a>第二个元素</a>
  60.         </div>
  61.         <div class="div">
  62.             <a>:first-child</a>
  63.             <a>第二个元素</a>
  64.             <a>第三个元素</a>
  65.             <a>:last-child</a>
  66.         </div>
  67.     </div>
  68.  
  69.     <script type="text/javascript">
  70.         //查找class="last-div"下的第二个a元素
  71.         ?.css("color", "#CD00CD");
  72.     </script>
  73.  
  74.     <script type="text/javascript">
  75.         //查找class="last-div"下的倒数第二个a元素
  76.         ?.css("color", "red");
  77.     </script>
  78.  
  79. </body>
  80.  
  81. </html>
  1. .left {
  2.         width: auto;
  3.         height: 120px;
  4.     }
  5.  
  6.     .left div {
  7.         width: 150px;
  8.         height: 100px;
  9.         padding: 5px;
  10.         margin: 5px;
  11.         float: left;
  12.         background: #bbffaa;
  13.         border: 1px solid #ccc;
  14.     }
  15.     a{
  16.         display: block;
  17.     }
下一节