css first-child伪类选择器详解

三种使用情况

•  p:first-child  选中同级第一个并且为p的元素
•  p:first-child em 选中同级第一个并且为p的元素下的em元素
•  p em:first-child 选中所有p元素下，同级第一个且为em的元素

---

p:first-child

 代码

    
0000000
    
1111111

    

        
2222222
        
3333333
    

    

        
4444444
        
5555555
    

效果
 

 结论：

1、同级：如上代码。最外层的h3,p,div同级，div里面的h3和p同级，另一个div里的两个p同级

2、第一个且为p：如上三组中，前两组中 第一个元素都是h3，只有第三组中第一个元素为p。所有只选中4！

---

p:first-child em

代码

    
hhhhh3
    

        111111
        222222
    
    

        

            333333
            444444
        
    

效果

结论：

最外层h3,p,div属于同一级，div下的p最为一级。

第一组第一个元素为h3，第二组第一个元素为p，选中该p后进一步使用后代选择器选中该p下的所有em标签，即3和4！

---

 p em:first-child

 代码

    
hhhhh3
    

        111111
        222222
    
    

        

            111111
            222222
        
    

效果

结论：

这里的first-child是作用在em上的

先选中p元素的后代元素em，然后对em进一步筛选，与之前相同，判断是不是同级第一个为em的元素，两个‘1’都是他们所在层级中的第一个！

（上述筛选过程，原理上是先选中em，然后根据p筛选，即从右向左。这里为了符合正常人的思维从左向右描述）

 

学费了吗？麻烦点亿个~