分类选择器的应用

 /*：nth-child（n）:选中第几个孩子，n 从一开始*/
  #div1 :nth-child(2){background-color: #20C3C8;}

 

  /*选择div1下 的第一个孩子，如果孩子是p标签 命中*/
  #div1 p:nth-child(1){background-color: #E52AD4;}
      
       /*可以是表达式：  :nth-child(3n+1)
             n从0开始  1 4 7 10 .....*/
  #div2 :nth-child(3n) {background-color:#98CFEA;}

  /*odd:奇数     even:偶数   前面如果没有容器（div）限制时,是body的孩子*/
  #div3 :nth-child(odd){background-color: #FAB9EE;}
  #div3 :nth-child(even){background-color: #B5F6AC;}

 

        /*#div4下的第一个孩子*/
  #div4  :first-child{background-color: #6F0505;}

 

  /*#div4下的最后一个孩子*/
  #div4  :last-child{background-color: #388395;}

 

         /*div5 下只有一个孩子*/
  #div5 :only-child{background-color:#3A0707;}

 

        /*选择div下的倒数第二个孩子  和 :nth-child相反*/
  #div6 :nth-last-child(2){background-color: #FF8C73;}

 

 /*查找第二个孩子，如果第二个孩子是p 命中 */
     #div1 p:nth-child(2){background-color:#E9AFFC;}

 

  /*:nth-of-type(n);   查找div1下的第二个 p 元素 ！！ */
  #div1 p:nth-of-type(2){background-color: #F68B8B;}

       /*查找div2下的倒数第二个P 元素*/
  #div2 p:nth-last-of-type(2) {background-color: #705555;}

  /*div3下只有一个p元素  但是可以有其他的非p元素*/
  #div3 p:only-of-type{background-color: #7BF473;}