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)