前端培训丁鹿学堂：css伪类选择器总结（一）

css结构伪类 :nth-child(n)

css结构伪类是css比较复杂的选择器。了解了怎么使用以后可以在实际项目中更高效率的写样式。 :nth-child(n) 表示当前元素向上查找的父元素的第n个元素 向上再向下，就是当前的元素范围查找第n个

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
<style>
 ul li:nth-child(1){
    color:red
 }      
</style>

:nth-child(2n)

这里的n是变量，但是是固定写法，不能写2a，2b，2c，表示选择所有的偶数元素

:nth-child(2n+1)

同上，这里表示选中所有的奇数元素

:nth-child(-n+5)

这个表示选择元素的前5个，-n是固定写法。后面的要选择前x个就+x

:nth-last-child(n)

这个用法和:nth-child是一样的，不过nth-child 是从前往后数，而nth-last-child是从后往前数

结构伪类之:nth-type-of(n)

当父元素下面的元素类型不一样的时候，nth-type-of会排除其它类型，而去选择排除后的某个类型的元素的第n个

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <p>p4</p>
        <span>span4</span>
    </div>

上面的结构，如果用 div span:nth-child(4) 他不会去排除，而是选第4个，发现第四个是p而不是span，则选不中，没有符合的 如果是用div span:nth-type-of(4) 则会忽略p，直接找第4个span，就会找到span4这个元素了去写样式了

nth-last-type-of

就是从后面往前数，使用方法和nth-type-of是一样的