css3结构伪类选择器使用小例子

结构伪类选择器
first-child
nth-child(n) 里面可以是数字 可以是even(偶数) odd(奇数） 也可以是式子如 -n+5 表示前五个
last-child

用法与上面基本一样 但是 nth-of-type会先去查看前面指定的元素 再去看目标是排在第几个
nth-of-type(1)

例

        /* 选择ul里面的第1个li */
        ul li:first-child {
            background: blue;
        }

        /* 选择ul里面的最后1个li */
        ul li:last-child {
            background: purple;
        }


        /* 选择ul里面的第2个li */
        ul li:nth-child(2) {
            background-color: red;
        }

        //注意冒号前面不要打空格

输出：

例

//偶数
        ul li:nth-child(even) {
            background-color: red;
        }
//奇数
        ul li:nth-child(odd) {
            background-color: blue;
        }

输出

例

        /* 用式子表示前五个 */
        ul li:nth-child(-n+5) {
            background-color: red;
        }

输出

例

        ul li:nth-of-type(odd) {
            background-color: red;
        }

输出

记得冒号前不要打空格