CSS3选择器

一：伪类结构选择器

	<style>
        ul li:first-child {
            background-color: pink;
        }
        
        ul li:last-child {
            background-color: red;
        }
        
        ul li:nth-child(6) {
            background-color: aqua;
        }
    </style>	

二：nth-child参数详解

1. 本质上就是选中第几个子元素，使用不同的n
2. n可以是关键字，数字，公式
3. n如果是第几个元素就是选中第几个
4. 常见的关键字：even表示偶数；odd表示奇数
5. 如果n是公式，则从0开始计算；第0个元素或者超出元素的个数则忽略

	<style>
        /* 选中偶数 */
        
        ul li:nth-child(even) {
            background-color: aqua;
        }
        /* 选中奇数 */
        
        ul li:nth-child(odd) {
            background-color: pink;
        }
        /* 选中偶数 */
        
        ul li:nth-child(2n) {
            background-color: aqua;
        }
        /* 选中奇数 */
        
        ul li:nth-child(2n+1) {
            background-color: pink;
        }
        /* 选中前5个 */
        
        ul li:nth-child(-n+5) {
            background-color: red;
        }
        /* 选中从5开始的的元素 */
        
        ul li:nth-child(n+5) {
            background-color: red;
        }
    </style>

三：nth-child和nth-of-type的区别

1. nth-child：选择父元素里面的第几个子元素，不区分类型
2. nth-of-type：选择指定类型的元素

<style>
		div span:first-of-type {
            background-color: red;
        }
        
        div span:last-of-type {
            background-color: pink;
        }
        
        div span:nth-of-type(2) {
            background-color: blue;
        }
</style>

四：伪元素选择器

1. befor和after必须有content属性
2. before在内容的前面，after在内容的后面
3. before和after创建一个元素，但属于行内元素
4. 因为在dom里面看不见刚才创建的元素，所以我们称之为伪元素

	<style>
        div {
            color: pink;
        }
        
        div::after {
            width: 50px;
            height: 50px;
            text-align: center;
            display: inline-block;
            content: '之阔'
        }
        
        div::before {
            width: 50px;
            height: 50px;
            text-align: center;
            display: inline-block;
            content: '绚丽'
        }
    </style>