css3新增元素结构伪类选择器总结

1.结构伪类选择器（nth-child和nth-of-type) 这类选择器主要应用于父元素下面有很多相同的元素，怎么个性化选择元素而诞生的。比如无序列表等。

（1）nth-child(适用于父元素下面都是同一种类的元素，无其他元素)

（2）nth-of-type（适用于父元素下面参杂了很多不同的元素）

（3）常用的就是 frist-child last-child nth-child(n) nth-child(even/odd) nth-of-type(n) frist-of-type
last-of-type 
（4）2者之间 child 是先看child的序号是否匹配前面的元素  type是先看元素再看后面的序号，根据需求选择响应的结构伪类选择器，他们的权重为10.

注意一下第一种和第三种都可以使用nth-child

能不能使用nth-child的核心点在于nth-child 是把所有的子元素排成序号不管是不是同一类元素
对于第二种而言ul li:nth-child(1)是不生效的。因为p元素为第一位。但是又和前面的li元素对不上。
所以此时可以考虑 nth-of-type 可以用ul li:nth-of-type(1)此时选的是li元素的第一位。

<ul>                                     
    <li></li>
    <li></li>      
    <li></li>
    <li></li>
</ul>

<ul>
    <p></p>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ul>
    <li></li>
    <li></li>
    <p></p>
    <li></li>
    <li></li>
</ul>