CSS3 --- 伪类结构

标签、属性、属性值统称为html元素，下面以无序列表作为示例

<div class="box">
    <ul>
        <li class="one">html</li>
        <li class="two">css</li>
        <li class="three">javascript</li>
        <li class="col-one">mysql</li>
        <li class="col-md">jquery</li>
        <li>php</li>
    </ul>
</div>

E => element 元素 

E:first-child{}   =>   选择第一个子元素，例：

.box ul:first-child{}   //选择第1个<li>

E.last-child{}   => 选择最后一个子元素，例：

.box ul:last-child{}   //选择第6个<li>

E:only-child{}   =>   选择仅有的一个子元素，不适合本案例；

E:nth-child(n){}   =>   选择第n个子元素，例：

.box ul:nth-child(3){}   //选择第3个<li>

E:nth-child(2n+1){}   =>   选择奇数的子元素，或者 E:nth-child(odd){}，例：

.box ul:nth-child(2n+1){}   或者
.box ul:nth-child(odd){}   //选择的都是第1、3、5个<li>

E:nth-child(2n){}   =>   选择偶数的子元素，或者 E:nth-child(even){}，例：

.box ul:nth-child(2n){}   或者
.box ul:nth-child(even){}   //选择的都是第2、4、6个<li>