CSS选择器之:first-child,:last-child

定义

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

提示：p:last-child 等同于 p:nth-first-child(1)。

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示：p:last-child 等同于 p:nth-last-child(1)。

直接看定义稍微有点绕，定义中最关键的就是属于其父元素。如果不能理解的话我们通过几个经典的例子来让大家豁然开朗。

实例

first-child和last-child基本相同，我们通过看:last-child一并学习吧

    
    
    
    



    我的父级是level-1
    

        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
    
    

        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
        我的父级是level-2-1
    
    我的父级是level-1

通过上面的例子我们很容易看出来last之间的关系，看似明白了那我们接下来继续看

    
    
    
    



    我的父级是level-1
    

        level-2-1-btn
        level-2-1-btn
        level-2-1-btn
        level-2-1-btn
        level-2-1-btn-last
        level-2-1-p-last
    
    

        level-2-2-btn
        level-2-2-btn
        level-2-2-btn
        level-2-2-btn
        level-2-2-btn-last
        

            level-2-2-1
            level-2-2-1
            level-2-2-1
            level-2-2-1
            level-2-2-1-last
        
    
    level-1-btn-last
    
level-1-p-last

是不是有点疑问，为什么只有一个btn生效。我们用button做详解，其他的都同理

1. button:last-child寻找select的父级元素，直到查到body；
2. 根据父级元素查找其最后一个子元素A；
3. 对比该子元素A和button是否为同一类型，如果是则生效，否则不生效；

如果能看懂最后一个例子，那么对于last-child就出师了

    
    
    
    



    我的父级是level-1
    

        level-2-1-btn
        level-2-1-btn
        level-2-1-btn
        level-2-1-btn
        level-2-1-btn-last
        level-2-1-p-last
    
    

        level-2-2-btn
        level-2-2-btn
        level-2-2-btn
        level-2-2-btn
        level-2-2-btn-last
        

            level-2-2-1
            level-2-2-1
            level-2-2-1
            level-2-2-1
            level-2-2-1-last
        
    
    level-1-btn-last
    
level-1-p-last