css3结构伪类选择器

1.li:first-child
2.li:last-child
3.nth-child(n) 我们要第几个，n就是几 比如我们选第8个， 我们直接写 8就可以了
4.伪类

 /* n 是公式  但是 n 从0开始计算 */
        /* ul li:nth-child(n) {
            background-color: pink;
        } */
        /* 2n 偶数  类似于 even */
        /* ul li:nth-child(2n) {
            background-color: pink;
        } */
        /* 2n + 1  类似于 odd */
        /* ul li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* 5n  选择第  0  5  10  15 ... */
        /* ul li:nth-child(5n) {
            background-color: pink;
        } */
        /* n+5 就是从第5个开始往后面选择 包含第5个 */
        /* ul li:nth-child(n+5) {
            background-color: pink;
        } */
        /* -n + 5 就是选择前面5个  */
        
        ul li:nth-child(-n+5) {
            background-color: pink;
        }

5.nth-of-type

  div p:first-of-type {
            background-color: purple;
        }
        
        div span:last-of-type {
            background-color: skyblue;
        }
          div span:nth-of-type(2) {
            background-color: red;
        }