nth-child()、nth-of-type

下午工作恰巧因为业务需求一股脑用到了这css几个选择器就详细的写一下。
首先这几个选择器叫做伪类选择器（标志就是 :）伪元素选择器（标志是 ::）
代码：

html:
        <ul>
      <li>一曲二三里</li>
      <li>烟村四五家</li>
        <li>亭台六七座</li>
        <li>八九十枝花</li>
      </ul>

css： 
            //li的第一个孩子
            li:first-child {
            color: pink; 
          }
          //li的最后一个孩子
          li:last-child {   
            color: purple;
          }
          //后面括号里是几那么就是第几个孩子
          li:nth-child(2) {   
        color: skyblue;
        font-size: 12px;
          }
      li:nth-child(3) { 
        color: green;
        font-size: 12px;
      }
      //li的所有偶数项
      li:nth-of-type(even)
      //li的所有奇数项
      li:nth-of-type(odd)